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随 着 Internet 的 快速 发 展 和 不 断 普及 ,网 站 成 了 传播 信息 最 有 效 的 平台 ,给 我 们 的 学 
习 和 工作 带 来 了 非常 深刻 的 影响 。 网 站 开发 与 设计 也 成 为 了 一 门 新 兴 的 学 科 , 越 来 越 多 
的 高 等 院 校 的 多 个 专业 都 开设 了 相关 课程 ,作者 利用 多 年 积累 的 教学 经 验 和 网 站 开发 的 
实践 经 验 ,着 手 编写 了 这 本 适合 高 等 院 校 ,高 等 职业 技术 学 院 使 用 的 应 用 性 教材 。 


1. 本 书 内 容 介 绍 


本 书 共 分 为 13 章 , 包 含 3 个 部 分 的 内 容 , 其 中 第 1 章 ”网 站 开发 基础 .第 2 章 HTML 
语言 基础 .第 3 章 CSS 语言 基础 和 第 4 章 JavaScript 语言 基础 是 网 站 建设 基础 部 分 ， 
介绍 了 网 站 的 基础 知识 以 及 相关 的 HTML、CSS 和 JavaScript 语言 基础 ;第 5 章 认识 
Dreamweaver 8.0,、 第 6 章 网 页 的 排版 布局 .第 7 章 添加 网 页 元 素 、 第 8 章 使 用 模板 
和 库 、 第 9 章 ”使 用 CSS 样式 表 、 第 10 章 创建 网 页 特效 和 第 11 章 ”网 站 的 测试 与 发 
布 是 网 页 设计 制作 部 分 ,详细 介绍 了 如 何 利用 网 站 开发 制作 工具 Dreamweaver 8. 0 
进行 网 站 建设 的 基础 知识 和 基本 操作 ;第 12 章 动态 网 站 开发 基础 和 第 13 章 使 用 
Dreamweaver 创建 动态 网 站 是 动态 网 站 开发 部 分 ,介绍 了 动态 网 站 开发 所 需 具备 的 基础 
知识 以 及 利用 Dreamweaver 8.0 开发 动态 网 站 的 相关 操作 。 


2. 本 书 主要 特色 


(1) 总 结 了 多 年 积累 的 教学 经 验 ,内 容 章节 组 织 合理 。 

(2) 在 网 页 设计 制作 部 分 采用 了 理论 结合 实践 的 方法 ,介绍 了 大 量 的 实例 操作 帮助 
读者 快速 清晰 地 掌握 各 种 操作 。 

(3) 每 章 后 面 都 有 相应 的 习题 ,使 读者 能 巩固 所 学 知识 并 提高 上 机 操作 能 力 。 


3. 本 书 适用 对 象 


本 书 内 容 丰 富 , 图 文 并 茂 , 具 有 较 强 的 可 读 性 ,实例 通俗 实用 ,具有 良好 的 可 操作 性 ， 
可 作为 普通 高 校 计算 机 专业 专科 和 非 计算 机 专业 本 科学 生 的 网 站 开发 与 设计 课程 教材 ， 
也 可 供 网 站 开发 的 初学 者 阅读 。 

本 书 由 赵 元 媛 拟定 编写 大 纲 及 负责 编写 第 7.8、9、10、.12、13 章 , 并 统 稿 全 书 , 张 角 编 
写 第 3.5、11 章 , 耿 直 编 写 第 1.2 章 , 但 小 岗 编写 第 4 章 , 杨 琼 编 写 第 6 章 。 本 书 在 编写 过 
程 中 参考 了 大 量 文献 ,在 此 对 各 文献 的 作者 表示 衷心 的 感谢 ! 


由 于 作者 水 平 有 限 , 书 中 难免 存在 一 些 玻 漏 和 错误 ,殷切 希望 同行 专家 和 广大 读者 批 
评 指正 。 
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网 站 开发 基础 


随 着 Internet 网 络 的 发 展 ,网 络 已 逐渐 成 为 人 们 生活 的 一 部 分 ,人 们 可 以 通过 
Internet 获取 各 种 想 要 的 信息 ,查找 各 种 资料 ,同时 也 可 以 将 自己 的 资料 和 文献 发 布 到 网 
络 上 ,实现 资源 共享 。 然 而 这 些 功 能 的 实现 都 是 采用 网 站 作为 用 户 接口 的 ,那么 要 如 何 建 
立 网 站 和 制作 网 页 呢 ? 从 现在 开始 ,我 们 将 进入 到 网 站 开发 与 设计 的 学 习 之 旅 。 


本 章 学 习 要 点 : 


。 网 站 开发 相关 术语 
。 网 页 的 构成 元 素 

。 网 站 的 开发 流程 

。 网 页 的 开发 制作 工具 


1.1 基础 知识 


为 了 更 好 地 学 习 以 后 章节 的 内 容 , 首 先 必须 先 了 解 和 掌握 一 些 与 网 站 开发 相关 的 基 
础 知识 。 


1. WWW 


WWW 或 3W 是 World Wide Web 的 缩写 ,俗称 万 维 网 ,是 目前 Internet 上 最 受 欢 
迎 \ 最 为 流行 的 一 种 信息 检索 服务 工具 , 它 通过 将 位 于 全 世界 Internet 上 不 同 地 点 的 相关 
数据 信息 有 机 地 编织 在 一 起 ,为 用 户 提供 了 一 种 友好 的 信息 查询 接口 , 即 用 户 仅 需 提出 查 
询 要 求 ,而 到 什么 地 方 查询 及 如 何 查询 则 由 WWW 自动 完成 。 因 此 ,WWW 带 来 的 是 世 
界 范围 的 超级 文本 服务 ,只 要 操纵 计算 机 的 鼠标 ,就 可 以 通过 Internet 从 全 世界 任何 地 方 
调 来 所 希望 得 到 的 文本 、 图 像 和 声音 等 信息 。 


2. URL 


URL 是 Uniform Resource Locator 的 缩写 , 即 统一 资源 定位 地 址 ,也 就 是 通常 所 说 
的 网 址 。URL 是 Internet 上 用 于 指定 信息 位 置 的 表示 方法 。 一 个 完整 的 URL 地 址 由 协 


议 名 、Web 服务 器 地 址 、 文 件 在 服务 器 中 的 路 径 和 文件 名 4 部 分 组 成 。 例 如 : http:// 


www. gzu. edu. cn/djsz/index. htm。 
3. 浏览 器 


浏览 器 是 指 可 以 显示 网 页 服务 器 或 者 文件 系统 的 HTML (HyperText Markup 
Language, 超 文本 标记 语言 ) 文 件 内 容 , 并 让 用 户 与 这 些 文件 交互 的 一 种 软件 。 网 页 浏览 
器 主要 通过 HTTP 协议 与 网 页 服务 器 交互 并 获取 网 页 ,这些 网 页 由 URL 指定 ,文件 格式 
通常 为 HTML。 目 前 最 常见 的 网 页 浏览 器 包括 微软 公司 的 Internet Explorer、Mozilla 的 
Firefox、Apple 的 Safari、Opera、HotBrowser 和 Google 的 Chrome。 


4. HTML 


HTML 是 构成 网 页 文档 的 主要 语言 。HTML 文本 是 由 HTML 命令 组 成 的 描述 性 
文本 ,HTML 命令 可 以 说 明文 字 、 图 形 、 动 画 、 声 音 、 表 格 ,链接 等 。HTML 的 结构 包括 头 
部 (Head) ,主体 (Body) 两 大 部 分 ,其 中 头 部 描述 浏览 器 所 需 的 信息 ,而 主体 则 包含 所 要 说 
明 的 具体 内 容 。 我 们 将 在 下 一 章 对 HTML 进行 具体 介绍 。 


5. 静态 网 页 与 动态 网 页 


在 网 站 设计 中 ,纯粹 HTML 格式 的 网 页 通常 被 称 为 “静态 网 页 ”, 早 期 的 网 站 一 般 都 
是 由 静态 网 页 制作 的 。 静 态 网 页 文件 通常 都 是 以 . htm、. html、. shtml、. xml 等 为 后 级 
的 。 在 静态 网 页 上 ,也 可 以 出 现 各 种 动态 的 效果 ,如 GIF 格式 的 动画 、Flash 滚动 字母 等 ， 
但 这 些 “ 动 态 效果 ”只 是 视觉 上 的 ,与 下 面 将 要 介绍 的 动态 网 页 是 不 同 的 概念 。 

动态 网 页 是 与 静态 网 页 相对 应 的 ,通常 以 . aspx、. asp、. jsp、. Php、. perl、. cgi 等 形式 
为 后 缀 。 动 态 网 页 也 可 以 是 纯 文 字 内 容 的 ,也 可 以 是 包含 各 种 动画 的 内 容 , 这 些 只 是 网 页 
具体 内 容 的 表现 形式 ,无论 网 页 是 否 具 有 动态 效果 ,采用 动态 网 站 技术 生成 的 网 页 才 称 为 
动态 网 页 。 

程序 是 否 在 服务 器 端 运行 ,是 区 别 静 态 网 页 和 动态 网 页 的 重要 标志 。 在 服务 器 端 运 
行 的 程序 、 网 页 .组件 , 属 于 动态 网 页 ,它们 会 随 不 同 客 户 、 不 同时 间 , 返 回 不 同 的 网 页 ,而 
运行 于 客户 端的 程序 、 网 页 .插件 .组件 ,属于 静态 网 页 ,它们 是 永远 不 变 的 。 


1.2 认识 网 站 


网 站 也 称 为 站 点 ,是 指 在 网 络 上 ,根据 一 定 的 规则 ,使 用 HTML 语言 或 网 页 制作 工 
具 等 制作 的 用 于 展示 特定 内 容 的 相关 网 页 的 集合 。 简 单 地 说 ,网 站 是 一 种 通信 工具 ,就 像 
布告 栏 一 样 ,人 们 可 以 通过 网 站 来 发 布 自己 想 要 公开 的 信息 ,或 者 利用 网 站 来 提供 相关 的 
网 络 服务 ,也 可 以 通过 网 页 浏览 器 ,获取 自己 需要 的 信息 或 者 享受 网 络 服务 。 

网 站 是 多 个 相关 网 页 的 集合 ,网 站 所 提供 的 大 部 分 信息 都 是 通过 网 页 来 呈现 的 。 网 
站 中 的 网 页 之 间 有 一 定 的 链接 关系 ,可 以 通过 点 击 被 设置 为 超 链 接 的 文字 或 对 象 来 跳 转 
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到 相关 的 网 页 。 
1.2.1 网 站 的 类 型 


在 设计 网 站 时 ,设计 者 需要 先 确 定 网 站 的 类 型 ,按照 不 同 的 分 类 方法 ,网 站 可 分 为 不 
同类 型 。 

按照 网 站 的 用 途 来 进行 分 类 ,网 站 可 分 为 门户 网 站 .导航 网 站 .搜索 引擎 网 站 .电子 商 
务 网 站 、 公 司 宣传 网 站 ,政府 部 门 网 站 和 个 人 网 站 等 几 大 类 。 


1. 门户 网 站 


门户 网 站 是 指 一 些 大 型 的 综合 性 商业 网 站 ,用 于 提供 各 种 各 样 的 服务 ,如 论坛 .电子 
邮箱 、 虚 拟 社区 以 及 发 布 新 闻 ,娱乐 .体育 等 页 面 的 信息 服务 。 国 内 比较 著名 的 门户 网 站 
有 网 易 (http://www.163. com) ,新 浪 (http://www. sina. com. cn) ,搜狐 (http://www. 


sohu. com) 等 。 
2. 导航 网 站 


导航 网 站 是 一 种 特殊 的 网 站 ,用 于 分 门 别 类 地 提供 各 类 网 站 链接 ,以 便 用 户 查 找 并 选 
择 所 需 的 网 站 ,通过 点 击 导航 网 站 中 的 超 链 接 可 快速 跳 转 到 相关 的 网 站 。 这 类 网 站 的 代 
表 有 网 址 之 家 (http://www. hao123. com)、 网 址 大 全 (http://www. 9991. com)、265 上 
网 导航 (http://www. 265. com) 等 。 


3. 搜索 引擎 网 站 


搜索 引擎 网 站 是 为 用 户 提供 内 容 搜索 功能 的 网 站 ,用 户 通 过 输入 关键 字 来 搜索 相关 
的 网 站 。 这 类 网 站 的 代表 有 百度 (http://www. baidu. com) ,谷歌 (http://www. google. 
com) ,雅虎 (http://www. yahoo. com) 等 。 


4. 电子 商务 网 站 


电子 商务 网 站 作为 网 上 交易 平台 ,用 于 发 布 和 搜索 供求 信息 ,进行 线 上 或 线 下 交易 
等 。 比 较 著名 的 国内 电子 商务 网 站 有 阿里 巴巴 (http://china. alibaba. com) 及 其 旋 下 的 
淘宝 网 (http://www. taobao. com)、 易 趣 (http://www. ebay. com. cn)、 拍 拍 (http:// 


www. paipai. com) 等 。 
5. 公司 宣传 网 站 


公司 宣传 网 站 是 最 常见 的 站 点 类 型 。 企 业 借 助 于 网 站 推广 企业 形象 .树立 企业 品牌 、 
发 布 企业 产品 。 这 类 网 站 主要 是 对 企业 产品 和 企业 服务 进行 发 布 。 这 类 网 站 如 腾讯 
(http://www. tencent. com) ,金山 软件 (http://www. kingsoft. com) 等 。 
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6. 政府 部 门 网 站 


政府 部 门 网 站 是 指 政 府 部 门 为 了 发 布 政府 信息 和 提供 在 线 服务 而 建立 的 网 站 。 这 类 
网 站 的 代表 有 中 国 网 (http://www. china. com. cn)、 教 育 部 网 站 (http://www. moe. 
edu. cn) 等 。 


7. 个 人 网 站 
个 人 网 站 也 常 叫做 个 人 主页 。 个 人 网 站 是 网 络 中 为 了 展示 自己 或 出 于 兴趣 而 建立 的 
网 站 ,其 形式 非常 灵活 ,可 以 包含 各 种 不 同 的 内 容 .但 规模 较 小 。 


1.2.2 构成 网 页 的 元 素 


最 初 的 网 页 单纯 以 文字 呈现 , 随 着 Internet 技术 的 不 断 发 展 ,现今 的 网 页 既 有 文字 、 
丰富 的 色彩 和 图 像 ,还 有 背景 音乐 ,视频 影片 .Flash 动画 、 超 链接 ,以 及 互动 的 表单 对 象 。 
下 面 介 绍 一 些 网 页 中 常见 的 组 成 元 素 。 


1. 文本 


网 页 中 的 信息 主要 是 以 文本 为 主 的 。 在 网 页 中 可 以 通过 字体 大小、 颜色、 底 纹 ,边框 
等 来 设置 文本 的 属性 。 


2. 图 像 


今天 看 到 的 丰富 多 彩 的 网 页 ,都 是 因为 有 了 图 像 ,可 见 图 像 在 网 页 中 的 重要 性 。 用 于 
网 页 中 的 图 片 一 般 为 JPG 和 GIF 格式 的 , 即 以 .jpg( 或 .jpeg) 和 . gif 为 后 级 的 文件 。 


3. 动画 

动画 是 网 页 上 最 活跃 的 元 素 ,包括 GIF 动画 和 Flash 动画 。GIF 动画 的 标准 简单 ,在 
各 种 类 、 各 版 本 的 浏览 器 中 都 能 播放 。Flash 有 很 多 重要 的 动画 特征 。 

4. 音频 与 视频 


随 着 网 络 带宽 的 增加 ,在 网 页 中 插入 音频 和 视频 ,可 以 提高 网 页 内 容 对 访问 者 的 吸引 
力 。 目 前 ,在 网 络 上 使 用 范围 最 广 的 音频 格式 主要 有 mp3、midi 和 wav 等 ,视频 格式 有 


asf.wmv、rm 和 rmvb 等 。 


5. 超 链接 


超 链接 是 网 站 的 灵魂 ,可 以 将 一 个 网 页 指向 另 一 个 目的 端 。 这 个 目的 端 通常 是 另 一 
个 网 页 ,但 也 可 以 是 一 幅 图 片 一 个 电子 邮件 地 址 一 个 文件 一 个 程序 或 者 也 可 以 是 本 页 
中 的 其 他 位 置 。 超 链接 可 以 是 文本 或 者 图 片 。 超 链接 正 是 Web 的 主要 特色 。 
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6. 导航 栏 


导航 栏 的 作用 是 引导 访问 者 浏览 站 点 。 导 航 栏 实际 上 就 是 一 组 超 链 接 ,其 链接 的 目 
标 是 本 站 点 中 的 各 个 网 页 。 导 航 栏 既 可 以 是 文本 链接 ,也 可 以 是 一 些 图 形 按钮 。 


7. 表单 


表单 是 访问 者 与 网 站 交互 的 桥梁 ,用 来 收集 站 点 访问 者 的 信息 。 站 点 访问 者 填写 表 
单 的 方式 是 输入 文本 、 单 击 单 选 按 钮 与 复 选 框 ,以 及 从 下 拉 菜 单 中 选择 选项 。 在 填写 好 表 
单 之 后 ,站 点 访问 者 便 送出 所 输入 的 数据 ,该 数据 就 会 根据 所 设置 的 表单 处 理 程序 ,以 各 
种 不 同 的 方式 进行 处 理 。 


1.3 网 站 的 开发 流程 


为 了 加 快 网 站 建设 的 速度 和 减少 失误 ,应 该 采用 一 定 的 制作 流程 来 策划 设计、 制作 
和 发 布 网 站 。 通 过 使 用 制作 流程 确定 制作 步骤 ,以 确保 每 一 步 顺 利 完成 。 好 的 制作 流程 
能 帮助 设计 者 解决 策划 网 站 的 烦琐 性 , 减 小 项 目 失败 的 风险 。 制 作 流程 的 第 一 阶段 是 规 
划 项 目 和 采集 信息 ,接着 是 网 站 规划 和 设计 网 页 ,最 后 是 上 传 和 维护 网 站 阶段 。 总 体制 作 
流程 如 图 1-1 所 示 。 
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图 1-1 网 站 开发 流程 图 
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1.3.1 需求 分 析 


主要 包括 三 个 部 分 : 一 是 目标 定位 ,需要 对 网 站 的 作用 和 职能 进行 分 析 ; 二 是 用 户 分 
析 , 分 析 了 解 使 用 网 站 的 用 户 特点 和 需求 .根据 其 进行 引导 和 服务 ;三 是 市 场 前 景 ,网 站 如 
同一 企业 ,也 需要 有 一 定 的 市 场 竞争 力 , 所 以 要 找到 市 场 结合 点 ,制定 出 切实 的 开发 目标 。 


1.3.2 网 站 制作 


网 站 制作 包括 网 站 的 选 题 .内 容 采 集 整 理 、 网 站 的 规划 以 及 选择 合适 的 网 站 制作 工具 


1. 确定 网 站 主题 和 风格 


确定 网 站 的 主题 和 风格 是 建立 网 站 时 首先 应 考虑 的 问题 。 网 站 主题 就 是 网 站 所 要 包 
含 的 主要 内 容 。 用 户 可 根据 网 站 的 定位 来 确定 网 站 的 主题 ,从 而 根据 主题 确定 网 站 的 风 
格 和 内 容 , 可 遵循 如 下 三 个 原则 : 

。 主题 要 小 而 精 

。 题材 不 能 太 滥 

。 目 标 不 能 太 高 

网 站 风格 是 指 网 站 的 整体 形象 给 浏览 者 的 综合 感受 ,包括 网 站 的 界面 风格 、 版 面 布 
局 ,浏览 方式 ,交互 性 ,文字 ,内容 价 值 等 因素 ,也 可 遵循 如 下 三 个 原则 : 

。 风格 要 建立 在 有 价值 的 内 容 之 上 

。 网 站 要 给 人 一 种 清晰 的 印象 

。 网 站 风格 要 和 网 站 的 主体 相 匹 配 


2. 内 容 的 采集 
采集 内 容 必须 与 主题 相符 ,在 采集 内 容 的 过 程 中 ,应 注重 特色 。 
3. 规划 网 站 


一 个 网 站 设计 的 成 功 与 否 ,很 大 程度 决定 于 设计 者 的 规划 水 平 。 网 站 的 规划 包括 很 
多 内 容 , 如 网 站 的 结构 .风格 .栏目 的 设置 颜色 的 搭配 ,版 面 的 布局 ,文字 图 片 的 运用 ， 
等 等 。 


4. 选择 制作 工具 


选择 一 款 功 能 强大 、 使 用 简单 的 软件 往往 可 以 起 到 事半功倍 的 效果 。 我 们 将 在 下 一 
节 为 大 家 推荐 介绍 几 款 网 页 制作 软件 。 
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1.3.3 上 传 发 布 


当 完 成 了 网 站 的 设计 、 制 作 、 调 试 ,测试 等 工作 后 ,需要 把 设计 好 的 站 点 上 传 到 服务 器 
来 完成 整个 网 站 的 发 布 。 现 在 上 传 的 工具 有 很 多 ,有 些 网 页 制作 工具 本 身 就 带 有 FTP 功 
能 ,利用 这 些 FTP 工具 ,就 可 以 很 方便 地 把 网 站 发 布 到 自己 申请 的 主页 存放 服务 器 上 。 


1.3.4 推广 宣传 


网 站 开通 后 ,就 像 注册 了 公司 一 样 , 必 须 进 行 宣传 推广 ,才能 变 得 知名 ,并 带 来 经 济 效 
益 。 网 站 的 推广 宣传 有 多 种 方式 ,例如 到 搜索 引擎 上 注册 、 与 别 的 网 站 交换 链接 、 加 入 广 
告 链接 等 。 


1.3.5 维护 更 新 


良好 的 维护 与 及 时 的 更 新 是 一 个 网 站 能 够 顺利 运行 的 重要 基础 。 一 个 网 站 创建 完成 
并 上 传 到 服务 器 后 , 仅 完成 了 真正 意义 上 网 站 的 一 小 部 分 , 接 下 来 会 有 大 量 的 网 站 维护 与 
更 新 工作 要 做 。 网 站 要 注意 经 常 维护 更 新 内 容 , 保 持 内 容 的 新 鲜 , 只 有 不 断 地 给 它 补充 新 
的 内 容 , 才 能 够 吸引 住 浏览 者 。 


1.4 常用 网 页 制作 相关 软件 


“ 工 和 欲 善 其 事 , 必 先 利 其 器 ”, 要 想 提 高 效率 地 制作 网 页 ,好 的 工具 软件 是 必 不 可 少 的 。 
Macromedia 公司 一 直 是 网 页 设计 方向 的 领导 者 ,其 旗下 的 “网 页 三 剑客 "在 网 页 设计 领域 
占有 绝对 优势 。“ 网 页 三 剑客 ”是 网 页 设计 过 程 中 三 种 最 常用 的 工具 软件 , 即 


Dreamweaver Fireworks 和 Flash。 


1.4.1 网 页 设计 软件 Dreamweaver 


Dreamweaver 是 一 个 功能 强大 的 网 页 设计 工具 ,有 着 方便 实用 的 工具 和 所 见 即 所 得 
的 排版 功能 ,界面 十 分 友好 ,使 用 方便 。 在 不 需要 掌握 HTML 语言 的 情况 下 , 即 可 利用 
其 强大 的 功能 开发 出 专业 的 网 页 。Dreamweaver 也 是 一 个 方便 的 编程 工具 ,可 以 方便 地 
编写 ASP.PHP、JSP 代码 ,软件 的 自动 提示 填充 功能 和 代码 染色 功能 可 以 有 效 地 帮助 用 
户 编 写 和 调试 各 种 代码 。 借 助 于 Dreamweaver 可 以 快速 方便 地 开发 出 各 种 动态 或 静态 
网 站 。 本 书后 续 章 节 将 重点 介绍 Dreamweaver 8.0 的 使 用 。 
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1.4.2 网 页 图 片 设计 和 切 图 软件 Fireworks 


网 页 丰富 多 彩 的 效果 需要 相应 的 图 片 才 可 以 表现 出 来 ,相应 的 图 片 需要 根据 网 页 的 
需求 来 设计 。Fireworks 是 一 个 功能 强大 专门 针对 网 站 平面 设计 的 图 片 处 理 软件 ,网 站 
的 美工 一 般 使 用 Fireworks 来 完成 。 利 用 Fireworks 可 以 方便 地 实现 图 形 设计 、 图 像 优 
化 处 理 和 发 布 等 工作 。 它 最 大 的 优点 在 于 解决 了 图 像 设计 和 网 络 应 用 的 关键 问题 ,并 且 
使 用 方便 ,学 习 简 单 。 


1.4.3 动画 设计 软件 Flash 


网 页 中 的 动画 内 容 可 以 使 网 站 更 加 美观 生动 ,Flash 是 目前 制作 网 络 交 互动 画 最 优 
秀 的 工具 , 它 支 持 动画 、 声 音 以 及 交互 功能 ,具有 强大 的 多 媒体 编辑 功能 ,并 可 直接 生成 主 
页 代码 ,使 用 户 在 进行 动画 制作 时 得 心 应 手 。 


1.4.4 平面 设计 软件 Photoshop 


Photoshop 是 由 Adobe 公司 开发 的 图 像 处 理 及 设计 软件 ,作为 专业 的 图 像 制 作 .编辑 
软件 ,可 以 帮助 我 们 提高 工作 效率 ,尝试 新 的 创作 方式 ,以 及 制作 适用 于 打印 、Web 和 其 
他 任何 用 途 的 高 品质 图 像 。 通 过 更 便捷 的 文件 数据 访问 、 流 线 型 的 Web 设计 、 更 快 的 专 
业 品 质 照 片 润 饰 功能 及 其 他 功能 ,可 创造 出 无 与 伦比 的 影像 世界 。 


1.5 习 题 


简 答题 

页 和 网 站 有 何 区 别 和 联系 ? 
页 主要 由 哪些 元 素 组 成 ? 
述 网 页 制作 的 基本 流程 。 


网 
网 


上 日 


co Ma 一 
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HTML 语言 基础 


HTML 是 一 种 简单 通用 的 用 来 描述 网 页 页 面 及 网 页 中 的 图 片 .表格 、 文 本 等 各 种 元 
素 的 标记 语言 。 用 户 在 浏览 网 站 时 ,浏览 器 解释 和 编译 这 种 语言 ,生成 用 户 可 以 看 懂 的 网 
页 。 本 章 介绍 了 HTML 语言 的 基本 结构 和 各 种 常用 标记 及 其 使 用 方法 。 


本 章 学 习 要 点 : 


。 HTML 语言 的 基本 结构 
。 HTML 文件 的 创建 
。 HTML 常用 标记 及 使 用 方法 


2.1 HTML 基础 


HTML(Hypertext Markup Language) 即 超 文本 标记 语言 ,是 用 特殊 标记 (tag) 来 描 
述 文档 结构 和 表现 形式 的 一 种 语言 。 使 用 HTML 语言 描述 的 文件 ,需要 通过 Web 浏览 


2.1.1 _ HTML 的 基本 结构 


HTML 文件 由 一 系列 语法 标记 组 成 。HTML 标记 由 尖 括 号 “所 之 ”引起 来 , 如 
二 br 二 就 是 一 个 换行 标记 。 在 HTML 文件 中 ,有 些 标记 是 成 对 出 现 的 , 即 一 个 开始 标记 
要 对 应 一 个 结束 标记 ,例如 ,< 一 div align 王 center 二 你 好 二 /div 二 ”就 是 一 个 成 对 出 现 的 
标记 ,二 div 二 是 开始 标记 ,二 /div 二 是 结束 标记 。 但 也 有 一 些 标 记 是 单一 出 现 ,没有 结束 
标记 。 

基本 的 HTML 页 面 以 二 html 盖 开始 ,以 二 /html> 结 束 , 中 间 的 内 容 分 为 头 部 和 主 
体 两 部 分 。 头 部 描述 浏览 器 所 需 的 信息 ,如 文档 的 标题 ,文档 中 脚本 文件 的 类 型 以 及 导入 
样式 表 的 信息 等 。 这 些 信息 都 包含 在 头 标记 二 head 和 二/head 二 之 间 ; 主 体 包 含 的 是 网 
页 显示 的 具体 内 容 , 一 般 包含 在 <body 盖 和 所 /body 二 之 间 。 下 面 是 一 个 HTML 文件 的 
基本 结构 : 


<htm> < 上 -文件 开始 标记 --> 


<head> <!--heada 开 始 标记 --> 
<title>…< /title> <!--title 标 记 --> 

< 二 -其 他 head 内 容 --> 

< /head> < !- -head 结 束 标记 - -> 

<body> < 上 -boqy 开 始 标记 --> 

~ < 小 -boay 网 页 内 容 - -> 

< /pody> < 上 -bodqy 结 束 标记 --> 

< /html> < 上 -文件 结束 标记 --> 

从 上 面 可 以 看 出 : 


(1) HTML 文档 包括 3 个 主要 标记 ,文档 标记 二 html 二 … 达 /html 放 、 头 部 标记 
二 head>>…</head 之 和 体 部 标记 二 body 之 …</body> 。 

(2) 标记 不 区 分 大 小 写 。 

(3) 标记 名 与 <” 之 ” 间 不 能 有 空格 。 


2.1.2 创建 HTML 文件 


用 HTML 编写 的 文件 (文档 ) 的 扩展 名 是 . html 或 . htm。 它 们 是 供 浏览 器 解释 浏览 
文件 的 格式 。 可 以 使 用 记事 本 .写字 板 或 FrontPageEditor 等 编辑 工具 来 编写 HTML 文 
件 。 下 面 的 例子 是 在 记事 本 中 创建 一 个 简单 的 页 面 。 

【实例 2-1】 在 记事 本 中 创建 一 个 HTML 页 面 , 其 步骤 如 下 。 

(1) 打开 记事 本 ,新 建 一 个 文件 ,输入 下 面 的 网 页 代码 ,如 图 2-1 所 示 。 


置 index. htal - 记事 本 
文件 中 编辑 于) 格式 @) 查看 名 帮助 0 


<html> 
《head> 
《title? 我 的 个 人 主页 </title> 
</head> 
<body> 
<p ”align="center"> 朋 友 ， 您 : 


您 好 。</p> 
<p align="left">2888， 北 京 欢迎 您 。</p> 
</body> 
</html> 


图 2-1 在 记事 本 中 输入 网 页 代码 


<html> 
<head> 
<title> 我 的 个 人 主页 < /title> 
< /head> 
< body> 
<Pp aligr= ”center 朋友 ,您 好 。 < /> 
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<p aligr= "Jeft"> 2008, 北 京 欢 迎 您 。< /p> 
< /pody> 
</hbm> 
(2) 保存 网 页 文件 。 执 行 "文件 ”一 “另存 为 ”命令 ,在 弹出 的 “另存 为 "对话 框 中 选择 
C 盘 ,在 “文件 名 ”文本 框 中 输入 文件 名 index. html。 单 击 “ 保 存 ” 按 钮 保存 文件 ,如 图 2-2 
所 示 。 


BDocments and Settines 
回 Domlosds 

BInetpub 

BProm Files 

DSysten Yolme Information 


文本 文档 多. txt) 取消 ] 


ANSI 


图 2-2 保存 网 页 文件 


(3) 浏览 网 页 。 在 C 盘 中 双击 index. html 文件 ,浏览 器 会 打开 这 个 网 页 ,其 显示 效 
果 如 图 2-3 所 示 。 


下 我 的 个 人 主页 - 了 icrosoft Internet Explorer 
文件 于) 编辑 EE) 查看 WW) 收 亭 &) 工具 上 帮助 0 


@m- © -BO Pm ww |B 
地 址 四) | 仆 c:\index. htnl 图 贺 和 到 i > 
6 第 入 起 要 控 示 的 内 窑 图 | 马术 霖 | 名 国 如 >” 


| 


Bai 台 百 要 
朋友 ， 您 好 。 


2008， 北 京 欢迎 您 。 


图 2-3 浏览 网 页 效果 
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2.2 常用 的 HTML 标记 
HTML 标记 是 HTML 语言 学 习 的 主要 内 容 , 下 面 介绍 一 些 常见 的 HTML 标记 。 


2.2.1 基本 标记 


1. 正文 标题 标记 过 hn 一 
语法 格式 ， 
<hn > 标题 内 容 < /hn> 


作用 : 用 来 设置 正文 标题 字体 的 大 小 。 

说 明 : n 为 标题 的 等 级 ,HTML 总 共 提 供 6 个 等 级 的 标题 Cn 一 1,2,3,4,5,6),n 越 
小 ,标题 字号 就 越 大 。 

【实例 2-2】 正文 标题 标记 的 运用 。 


<html> 
<head> 
<title> 标 题 标 记 的 作用 < /title> 
< /head> 
<body> 
这 里 是 正文 …… 
<hl> 这 是 曙 标 题字 , 它 最 大 < /hl> 
<h2> 这 是 开标 题字 < /h2> 
<h3> 这 是 码 标 题字 < /h3> 
<h4> 这 是 琢 标 题字 < /h4> 
<h5> 这 是 本 标题 字 < /h5> 
<he& 这 是 H6 标 题字, 它 最 小 < /he> 
</body> 
< /htm> 


图 2-4 是 6 种 正文 标题 字 在 浏览 器 中 的 显示 效果 ,注意 观察 正文 标题 字 大 小 的 规律 。 
2. 分 段 标记 所 p 过 

语法 格式 : 

<paligr#>."…< /p> 


作用 : 另 起 一 段 ,不 仅 具 有 换行 的 作用 .而 且 还 要 在 新 行 前 面 插入 一 个 空 行 。 
属性 : align 用 来 指定 字符 显示 时 的 排列 方式 ,属性 值 有 left、center、right 三 种 ,分 别 
表示 左 对 齐 、 居 中 和 右 对 齐 。 
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雪 标题 标记 的 作用 一 了 icrosoft 攻 Ezplorer 

| 文件 四 ”编辑 四 查看 咱 ，” 收 辣 内 工具 帮助 中 
» 

QE- ©- 国 四 人 Per Wx @|B- 

赴 直 加)| 钻 c:\index ht 国 固 和 到 各 读 *” 

Bai 久 s 朗 “| 图 入 入 划 要 再 # 扩 办 全 国 | 马 扫 -| 全国 和 提 ” 


这 是 H1 标 题字 ， 它 最 大 


这 是 H2 标 题字 
这 是 H3 标 题字 

这 是 H4 标 题字 

这 是 H5 标 题字 


计 是 B6 标 题字 。 它 最 小 


图 2-4 浏览 标题 字 的 效果 


3. 换行 标记 二 br 二 
语法 格式 ， 
<br> 


作用 : 强迫 该 标记 之 后 的 文字 在 浏览 器 中 换 到 下 一 行 中 显示 出 来 。 
说 明 : 二 br 二 是 一 个 单 标 记 , 不 需要 结束 标记 。 
【实例 2-3】 比较 分 段 标记 和 换行 标记 的 显示 效果 。 


<html> 

<head> 

<title> 分 段 标记 和 换行 标记 < /title> 

< /head> 

<body> 
大 家 好 <P> 我 是 分 段 标记 ,是 一 对 哦 < /p> 
看 清楚 哦 <br/> 我 是 换行 标记 ,是 个 单 标记 ! 

< /body> 

</hbm> 


图 2-5 是 分 段 标 记 和 换行 标记 在 浏览 器 中 的 显示 效果 ,注意 观察 两 种 标记 的 区 别 。 
4. 预 格 式 化 标记 二 pre 盖 

语法 格式 : 

pe 
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文件 四 编辑 EF) 查看) 收 若 由 工具 CD) “帮助 0D 


@=2- ©- 国 国人 Pr Wr OB- 


地 址 他) 


我 是 分 段 标记 ， 是 一 对 哦 


看 清楚 哦 
我 是 换行 标记 ， 是 个 单 标记 1 


图 2-5 分 段 标记 和 换行 标记 


作用 : 让 浏览 器 对 该 标记 内 的 内 容 按 原始 输入 格式 不 做 修改 地 输出 。 

说 明 : HTML 文档 中 不 支持 自动 换行 ,也 不 识别 多 个 空格 符 ,甚至 无 法 显示 一 些 特 
殊 字符 ,如 小 于 (二 )、 大 于 (二 ) 符 号 ,但 利用 预 格 式 化 标记 可 以 解决 这 些 问 题 。 

【实例 2-4】 运用 预 格式 化 标记 显示 内 容 。 


<html> 

<head> 

<title> 预 格式 化 标记 < /title> 

< /head> py 
Ei nd [=] 

< bee 文件 (E) 编辑 (E) 查看 ) !” 局 


<pre> "fe « 
Fe @ma. © -回国 @| 


换行 
< /pre> 
< 
不 能 
换行 
</p 
< /body> 
</htm> 


图 2-6 是 运用 预 格式 化 标记 在 浏览 器 中 的 显示 效果 。 
5. 注释 语句 标记 二 !-- -> 
语法 格式 : 


网 站 开发 与 设计 教程 


图 2-6 预 格 式 化 标记 


< 上 -注释 语句 --> 
作用 : 为 语句 作 注 释 。 


说 明 : 可 以 把 关于 代码 的 功能 、 作 者 、 注 意 事项 等 信息 作为 注释 语句 。 注 释 语句 中 的 
内 容 都 会 被 浏览 器 忽略 ,不 显示 在 网 页 上 ,所 以 可 以 在 注释 语句 中 写 和 任何 内 容 。 


【实例 2-5】 注释 语句 的 运用 。 

<htm> 

<head> 

<title> 注 释 语句 < /title> 

< /head> 

<body> 

这 是 标 有 制作 日 期 的 页 面 。< !- -2008 年 -7 月 - 

18 日 --> 

< /body> 

</htm> 

图 2-7 是 在 HTML 文件 中 加 入 注释 语句 
后 的 显示 效果 。 在 HTML 源 代码 中 适当 加 入 
注释 语句 是 一 种 非常 好 的 习惯 ,对 于 设计 者 日 
后 的 代码 修改 .维护 工作 都 有 很 大 的 好 处 。 另 
外 , 当 这 段 代 码 交 给 其 他 设计 者 维护 的 时 候 , 这 
些 注释 语句 可 以 让 其 他 人 更 容易 读 懂 已 有 的 
代码 。 


2.2.2 文本 类 标记 


1. 字体 标记 二 font 二 
语法 格式 : 
< font size=# cplor=# face=#>…< /font> 


作用 : 用 来 设置 文本 的 字体 、 大 小 和 颜色 。 


和 福 释 语句 - icrosoft Internet Ex,,. 人 | 口 |[X| 
文件 (E) 编辑 (E) 查看 CQ) 收藏 4) 工具 (DD) ”| 万 


@f 碍 -日 - 国 国 蚊 | 窑 W 关 ” 


让 直 癌 | 图 c:\Docuents and Settings\yoyev 国 回转 到 


这 是 标 有 制作 日 期 的 页 面 。 


属性 : size 用 来 描述 字号 的 大 小 ;color 用 来 描述 文本 的 颜色 ,可 以 用 # 号 开头 的 6 位 
十 六 进 制 值 表 示 ,也 可 以 用 HTML 预定 义 的 色彩 名 表示 ,系统 默认 的 字符 颜色 为 Black 


(黑色 ) ;face 用 来 设 定 文本 的 字体 。 


【实例 2-6】 字体 标记 的 运用 ,效果 如 图 2-8 所 示 。 


<html> 

<head> 
<title> 字 体 标记 < /title> 
< /head> 

<body> 
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(5) 


<font face=" 咖 体 " size=10 color= red> 今 天 天 气 真 好 ! < /font> 


<br> 


<font size=5 color= 啡 0000ff 咱 今天 天 气 真 好 ! < /font> 


<bodqy> 
</hbm> 


马 字 体 标记 - Microsoft Internet... [= 冲 || 
文件 介 ) 编辑 (E) 查看 (7) 收藏 人 ) 工具 ” 


Os. ©-@BG Pr “ 


马 字 体 标记 [| EA 
文件 (E) 编辑 (E) 查看 (8) 收藏 他 工具 ” 


in- ©- 国 国 @| Pr  ” 


着 十 加 | 外 ci\1,htn 


今天 天 气 真 好 ! 


今天 天 气 真 好 ! 


| 
让 ER ET 
图 2-8 字体 标记 (1) 图 2-9 字体 标记 (2) 


2. 字体 样式 标记 
语法 格式 : 
<b>…</b> <i"</i> << 


作用 : 二 b 二 … 二 /b 过 表示 字体 加 粗 ;过 i 二 … 达 /> 表示 和 斜体 字 ; 二 uu 二 … 达 /u 二 表示 
下 划 线 。 

说 明 ; 不 同 的 标记 可 以 峙 套 , 例 如 ,一 font color=red size 二 16 face= 二 黑体 二 二 b 二 你 
好 二 /b 二 二 font 志 表示:“ 你 好 ”两 个 字 是 黑体 、 红 色 、16 号 字 并 且 加 粗 。 

【实例 2-7】 字体 样式 标记 的 运用 ,效果 如 图 2-9 所 示 。 


<html> 

<head> 
<title> 字 体 标记 < /title> 
< [head> 

<body> 

正常 文本 <br> 

<b> 加 粗 文本 < /b><br> 

< 这 斜体 文本 < /i><br> 

< 必 下 划 线 文本 </><br> 
<t>< 这 加 粗 与 斜体 < 和 > < /> 
<body> 

</hbm> 
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2.2.3 列表 标记 


HTML 有 三 种 列表 形式 : 有 序列 表 (Ordered List) ,无 序列 表 (Unordered List) 和 定 
义 列表 (Definition List) 。 


1. 有 序列 表 


在 有 序列 表 中 ,每 个 列表 项 前 标 有 数字 、 字 母 或 罗马 符号 表示 顺序 。 有 序列 表 由 
去 ol> 开 始 ,每 个 列表 项 由 <<li 盖 开始 。 每 个 项 目 都 有 前 后 顺序 之 分 。 
【实例 2-8】 定义 有 序列 表 , 效 果 如 图 2-10 所 示 。 


和 济 有 序列 表 - Hicrosoft Internet Explorer 
文件 四 ”编辑 下 ) 查看 WD 收藏 和 工具 帮助 人 D 


Oa- ©- BO Pe war © |B 
地 址 加 | 本 c:\index_ htnl 国 
Ba 本 图 入 间 要 玲 素 的 四 全 国 | 色拉 索 “| 名 区 


常用 的 搜索 引擎 
1. 百度 
2. Google 


3， 雅虎 


图 2-10 有 序列 表 


<htm> 
<head> 
<title> 有 序列 表 < /title> 
< /head> 
<body> 
<strong> 常 用 的 搜索 引擎 < /strong> 
<ol> 
<1i> 百 度 < /1i> 
<1i> Google< /1i> 
<1i> 雅 虎 </1i> 
</ol> 
< /pody> 
< /himl> 


其 中 二 strong 二 标记 的 作用 是 强调 显示 。 有 序列 表 中 除了 默认 的 阿拉 伯 数 字 之 外 ， 
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还 有 很 多 其 他 排序 的 方式 ,使 用 方法 如 下 : 
“< 一 ol type 二 "a" 二 …< 一 /ol 一 ”中 type 的 属性 值 如 表 2-1 所 示 。 


表 2-1 二 ol 二 的 type 属性 


属性 值 含义 属性 值 含 义 
1 阿拉 伯 数 字 序列 : 1、2、3… 小 写 罗 马 数字 序列 : iii\iii… 
a 小 写 英文 字母 序列 : a、b、ec… I 大 写 罗马 数字 序列 : IIIIII… 


大 写 英文 字母 序列 : A、B、C… 


2. 无 序列 表 


无 序列 表 不 用 数字 标记 每 个 列表 项 ,而 采用 一 个 符号 标记 每 个 列表 项 ,例如 圆 黑 点 、 
方块 等 。 无 序列 表 由 二 ul 二 开始 ,每 个 列表 项 同样 由 到 li 开始 。 
【实例 2-9】 定义 无 序列 表 ,效果 如 图 2-11 所 示 。 


济 无 序列 表 - Hicrosoft Internet Explorer 
文件 四 ”编辑 时) 查看 WD 收藏) 工具 中 帮助 0 


@s- ©- 国 国 Pr Wemr @|B- 


十 二 加 | 个 c:\index. htnl 图 | 


a A 
儿 时 的 经 典 动 画 片 


。 大 闲 天 宫 
。 九 色 庵 


。 阿 凡 提 


图 2-11 无 序列 表 


<html> 
<head> 
<title> 无 序列 表 < /title> 
< [head> 
<body> 
<strong> 儿 时 的 经 典 动画 片 < /strong> 
<u> 
<1 放 大 半天 宫 < /li> 
<1li> 九 色 诽 < /1i> 
<Ji> 阿 凡 提 < /li> 
</u> 
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< /bodqy> 
</htm> 


二 ul 这 标记 和 过 li> 标 记 必须 相互 配合 使 用 。 无 序列 表 中 除了 默认 的 圆 黑 点 之 外 ,还 
有 很 多 其 他 显示 的 方式 ,使 用 方法 如 下 : 
“<ul type 一 "circle" 二 …<ul 二 ”中 type 的 具体 属性 值 如 表 2-2 所 示 。 


表 2-2 ”一 ul 二 的 type 属性 


属性 值 党 芝 
disc 默认 的 圆 黑 点 : 。 
circle 空心 圆 环 : 〇 
Square 方块 : 


3. 定义 列表 


定义 列表 通常 用 于 术语 的 定义 和 解释 。 定 义 列表 由 所 dl 盖 开 始 ,术语 由 二 dt 之 开始 ， 
术语 的 解释 说 明 由 二 dd 之 开始 ,二 dd 之 … 二 /dd> 里 的 文字 缩 进 显 示 。 
【实例 2-10】 创建 定义 列表 ,效果 如 图 2-12 所 示 。 


当 定 义 列表 - Wicrosoft Internet Explorer 

文件 四 编辑) 查看 WD 收藏) 工具 帮助 0D 

@e- 日: 国 国内 Pr 克 wex 人 @| 信 - 

于 直 加 | 枚 cvindex hil _ 图 加 和 ME” 
图 十 入 四 更 规 东 的 加 图 | 忆 扫 | 加 国 提 * 

定义 列表 一 常用 网 页 制作 工具 


Dreamweaver 


Dreamweaver 是 一 个 “所 见 即 所 得 ”的 可 视 化 网 站 开发 工 


Flash ， 
Flash 以 制作 网 上 动画 为 特长 。 
Fireworks 


hi 并 可 以 轻松 创作 6IF 动 


Photoshop 


Photoshop 是 专门 用 来 进行 图 像 处 理 的 软件 。 


图 2-12 定义 列表 


<head> 

<title> 定 义 列表 < /title> 

< /head> 

<body> 
<strong> 定 义 列表 - -常用 网 页 制作 工具 < /strong> 
<dq]l> 
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< dt> Dreanweaver< /dt> 
<dd> Drearweaver 是 一 个 “所 见 即 所 得 ”的 可 视 化 网 站 开发 工具 。< /a> 
<dt> Flash< /dt> 
<ddq> Flash 以 制作 网 上 动画 为 特长 。< /da 
< dt> Fireworks< /dt> 
< gc> Fireworks 以 处 理 网 页 图 片 为 特长 ,并 可 以 轻松 创作 GEE 动画 。< /os> 
< dt> Fhotoshop< /dt> 
<dd> Photoshop 是 专门 用 来 进行 图 像 处 理 的 软件 。< /ad> 
</dl> 
< /body> 
< /htm> 


2.2.4 HTML 的 属性 


HTML 标记 可 以 有 很 多 属性 ,属性 可 以 扩展 HTML 标记 的 功能 
名 和 属性 值 成 对 出 现 , 语 法 格式 如 下 : 


< 标记 属性 ]= "属性 值 "属性 二 "属性 值 2" …>…< /标记 > 


。 属 性 通常 由 属性 


属性 通常 是 写 在 开始 标记 里 面 , 属 性 值 一 般 用 双 引 号 (是 英文 半角 状态 下 的 双 引 号 ) 
标记 起 来 ,多 个 属性 并 列 的 时 候 , 用 空格 间隔 。HTML 常用 的 两 个 属性 是 align 和 style。 


1. align 属性 


align 属性 的 作用 是 定义 对 齐 方式 ,常见 属性 值 有 left center right 三 种 ,能够 控制 大 


多 数 元 素 的 左 对 齐 、 居 中 和 右 对 齐 。 
【实例 2-11】 设置 align 属性 。 


<html> 
<head> 
<title> align 对 齐 属 性 的 作用 < /title> 
< /head> 
<body> 
<p align= "left"> 左 对 齐 < /p> 
<p alignr "center"> 居 中 对 齐 < /p> 
<p align= "right"> 右 对 齐 < /p> 
< /body> 
< /htm> 


图 2-13 是 align 属性 定义 的 三 种 对 齐 方式 在 浏览 器 中 的 显示 效果 。align 属性 可 以 


定义 很 多 元 素 的 对 齐 方式 ,如 文字 、 图 片 .动画 等 。 
2. style 属性 
style 属性 的 作用 是 定义 样式 ,如 文字 的 大 小 色彩、 背景 颜色 等 。 
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style 属性 的 书写 


@s- ©- 国 lan a a 


地 相国 | 傅 c:\index. htnl 


图 2-13 align 对 齐 属性 示例 


格式 是 : 
< 标记 style= "属性 名 称 1: 属性 值 1; 属性 名 称 2: 属性 值 2;…">…< /标记 > 


一 个 style 属性 中 可 以 放置 任意 多 个 样式 属性 名 称 , 每 个 属性 名 称 对 应 相应 的 属性 
值 , 属 性 名 称 之 间 用 分 号 隔 开 。 
【实例 2-12】 设置 style 属性 。 


<html> 

<head> 

<title> style 属 性 的 作用 < /title> 

< /head> 

<body> 文件 (E) 编辑 (E) 查看 () 收 葛 人 工具 ”| 居 
<p style= "color: red; font- size: 24px; 吃 文 字 的 颜色 (€Ji. ©- 四 图 ls | 

和 大 小 都 改变 了 < /p> 

< /body> 文字 的 颜色 和 大 小 都 改变 了 

< /htm> 


图 2-14 是 利用 style 属性 改变 文字 的 颜色 和 大 
小 。color: red 代表 控制 文字 的 颜色 为 红色 ,当然 也 
可 以 换 成 任意 其 他 颜色 。font-size: 24px 代表 控制 文 


i 2 CE 
字 的 大 小 为 24 像素 。style 属性 的 用 途 非 常 广泛 , 利 图 2-14 style 属 性 示例 


用 它 可 以 更 精确 地 控制 网 页 内 容 。 
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2.2.5 _ HTML 颜色 


在 HTML 里 ,颜色 有 两 种 表示 方式 。 一 种 是 用 颜色 名 称 表 示 , 例 如 blue 表示 蓝 色 ， 
red 表示 红色 ; 另 一 种 是 用 十 六 进 制 的 数值 表示 RGB 的 颜色 值 。 

RGB 分 别 是 Red Green、Blue 的 首 字母 , 即 红 、 绿 、 蓝 三 原色 的 意思 。RGB 每 个 原色 
的 最 小 值 是 0( 十 六 进 制 为 0) ,最 大 值 是 255( 十 六 进 制 为 FF)。RGB 颜色 标准 几乎 包括 
了 人 类 视力 所 能 感知 的 所 有 颜色 ,是 目前 运用 最 广 的 颜色 系统 之 一 。 

RGB 的 颜色 的 表示 方式 为 # RRGGBB。 其 中 RR、GG、BB 的 取 值 范围 都 是 00 一 FF， 
如 白色 的 RGB 值 (255, 255,255) ,就 用 #FFFFFF 表示 ;黑色 的 RGB 值 (0, 0, 0) ,就 用 
#000000 表示 。 

通过 在 主体 标记 过 body 二 中 添加 背景 颜色 的 属性 background-color, 可 以 让 网 页 呈 
现 出 不 同 的 背景 颜色 ,增加 色彩 氛围 。background-color 这 个 属性 还 可 以 为 其 他 HTML 
元 素 加 入 背景 颜色 。 

【实例 2-13】 设置 背景 颜色 。 


<hbm> 

<head> 

<title> 背 景 颜色 < /title> 

< /heac> 

<body style= "background- color: # 006600"> 
我 有 背景 颜色 了 ,哈哈 。 

< /body> 

< /hm> 


图 2-15 是 页 面 加 背景 颜色 后 在 浏览 器 中 的 显 
示 效 果 。 现 在 浏览 器 支持 更 多 的 颜色 名 称 。 不 过 为 
保险 起 见 ,建议 采用 十 六 进 制 RGB 颜色 值 来 表示 颜 
色 , 并 且 在 值 前 加 上 # 这 个 符号 。 图 2-15 添加 背景 颜色 


2.2.6 二 div 之 和 二 span 盖 


过 div 之 和 过 span 之 标记 的 作用 都 是 用 于 定义 样式 的 容器 ,本 身 没 有 具体 的 显示 效 
果 , 由 其 style 属性 或 CSS 来 定义 ,不 过 两 者 在 使 用 方法 上 存在 着 很 大 的 差别 。 
【实例 2-14】 比较 div 之 和 二 span 二 的 显示 效果 。 


<html> 

<head> 

<title>div 和 span 标 记 < /title> 
< [head> 

<body> 


网 站 开发 与 设计 教程 


< div styler "background- color: # 3399FF"> 块 状 区 域 1< /div> 
<div style= "background- color: #990CFE"> 块 状 区 域 2< /div> 
< span style= "background- color: #FFOCFE"> 行 间 区 域 1< /span> 
< span style= "background- color: #993399"> 行 间 区 域 2< /span> 
< /pody> 
< /htm> 


图 2-16 是 div 和 span 标记 在 浏览 器 中 显示 效果 的 对 比 。 注 意 观 察 两 者 的 区 别 。 通 
过 上 面 的 实例 可 以 发 现 : 


EE 


文件 加。 编辑 查看 串 、 收 戌 史 工具 中 帮助 0 


Be- ©. 国 国 的 Pr 次 mx 加 | 全 -本 


地 三国 | 国 c:\index hl 


图 2-16 div 和 span 标记 应 用 


去 div 之 标记 是 一 个 块 状 的 容器 ,其 默认 的 状态 就 是 占据 整个 一 行 。 过 span 之 标记 是 
一 个 行 间 的 容器 ,其 默认 状态 是 行 间 的 一 部 分 ,占据 行 的 长 短 由 内 容 的 多 少 来 决定 。 


2.2.7 水 平 线 标记 二 hr 二 


语法 格式 : 
<hraligr=# width=# size=# color=# noshade> 


作用 : 在 网 页 文档 中 插入 水 平 线 。 

属性 : align 用 来 设置 水 平 线 的 对 齐 方式 ; width 用 来 设置 水 平 线 的 宽度 ;size 用 来 设 
置 水 平 线 的 粗细 ;color 用 来 设置 水 平 线 的 颜色 ;noshade 表示 无 阴影 效果 。 

【实例 2-15】 插入 水 平 线 , 效 果 如 图 2-17 所 示 。 

<htm> 

<head> 

<title> 分 割 线 < /title> 

< /heac> 
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<body> 

<hr> 

<hr size= "15" noshade > 

<hr width= "40% "> 

<hr width= "60" align= "left"> 

<hr size= "6" width= "30% " align= "center" noshade color= red 


> 
<booy> 
</htm> 


2.2.8 表格 标记 图 2-17 插入 水 平 线 


在 HTML 语言 中 ,表格 table 是 一 个 非常 重要 的 标记 ,使 用 隐藏 边框 线 的 表格 可 以 
布局 网 页 的 内 容 , 在 和 数据 库 连 接 时 ,表格 也 会 经 常用 到 。 表 格 的 基本 结构 如 下 : 


<table> 定 义 表格 
<captio> 定 义 标题 < /caption> 
<tr> 定 义 表 行 
<th> 定 义 表 头 < /th> 
< /tr> 
<tr> 定 义 表 行 
<t 中 定义 表格 单元 < /td 
< /tr> 
< /table> 


【实例 2-16】 创建 表格 。 


<htm> 
<head> 
<title> 表 格 标记 < /title> 
<body> 
< table border=1> 
< 
<th> 书 名 < /th> 
<th> 数 量 < /th> 
<th> 单 价 < /th> 
< /tr> 
<tr> 
<td Java Web 应 用 与 开发 < /td> 
<td> 5000 /td> 
<to 32 /td> 
</tr> 
< 
<td> cf .NET 程 序 开 发 < /td> 
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<td> 300 /td> 
<to 35< /td> 
<ftr> 
< /table> 
< /body> 
< /htm> 


图 2-18 是 添加 了 表格 标记 的 一 个 简单 表格 的 运行 效果 。 在 上 面 的 实例 中 ,利用 
二 table 二 标记 创建 了 一 个 表格 ,其 中 , border 属性 用 于 设置 表格 的 边框 粗细 。 一 组 
二 tr… 达 /tr 二 用 于 设 定 表格 的 一 行 。 一 组 过 td… 达 /td 放 则 设 定 一 个 单元 格 ,显示 的 


内 容 被 放置 在 单元 格 中 。 


案 表格 标 记 - 了 icrosoft Internet Ezplorer 
文件 全 编辑 人 E) 查看 @) 收 豪 和 ) 工具 CD) 帮助 0D 


@ 扣 -昌国 国 的 时 灾 mx 四 | 辐 - 总 


地 址 四 ) | 彼 |c: 


Nindex. html 
一 


书 名 数量 单价 
Java Web 应 用 与 开发 |5000 |32 


[Cc#. ET 程序 开发 。 [3000 |35 


输入 想 要 搜索 的 内 容 国 | 几 名 我 科 


图 2-18 插入 表格 


1. 表格 的 标题 


表格 的 标题 位 置 可 以 由 align 属性 来 设置 ,其 位 置 可 分 别 为 表格 上 方 和 表格 下 方 。 
设置 标题 位 于 表格 上 方 的 格式 为 : 二 caption align 王 top 二 … 亏 /caption 二。 设置 标题 位 


于 表格 下 方 的 格式 为 : 二 caption align 二 bottom 这 … 达 /caption 记 。 
【实例 2-17】 添加 表格 标题 ,效果 如 图 2-19 所 示 。 


<htm> 

<head> 

<title> 表 格 标题 < /title> 

<body> 

<table border= 1> 

<capticn align=top> 图 书 列表 < /caption> 
<tr> 


<th> 书 名 < /th><th> 数 量 </th><th> 单 价 < /th> 
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要 表格 标题 - 了 icroso: ft Internet Explorer 

文件 中 ”编辑 中 ”查看 WW 收 豪 和 ) 工具 QD 帮助 四 

@E- 日: 四 国信 Pr 次 mx 加 | 思 - 怠 

地 王国 | 本 c:\index htnl 国 固 和 放生 

Bai 窜 es 朗 “| 圆 入 入 二 要 于 不 的 办 安 国 | 忆 扫 来 -| 名 国 知 图 * 


图 书 列表 
| ” 书 和 数量 单价 
Java Web 应 用 与 开发 [5000 |32 


C#. NET 程 序 开发 。 [3000 |35 


图 2-19 表格 标题 


</tr> 
<tr> 
<tdy Java Web 应 用 与 开发 < /to>< td> 5000< /td <td 32< /to> 
</tr> 
<tr> 
<ta> c# .NET 程 序 开发 < /td>< to> 3000< /td><td 35 /to> 
</tr> 
< /table> 
< /body> 
</htm> 


2. 表格 的 大 小 


一 般 情 况 下 ,表格 的 总 宽度 和 总 高 度 是 根据 各 行 和 各 列 的 内 容 总 和 自动 调整 的 。 如 
果 想 要 直接 固定 表格 的 大 小 ,可 以 使 用 下 列 方式 : 


<table width= nl height=n2> 


width 和 height 属性 分 别 指定 给 表格 一 个 固定 的 宽度 和 高 度 ,nl 和 n2 可 以 用 绝对 
像素 数 来 表示 ,例如 : 二 table width 一 "200" height 王 "100" 之 。 也 可 以 用 百分比 (与 浏览 
器 窗口 尺寸 比例 ) 来 表示 ,例如 : 二 table width 一 20% height= 二 10% 这 >。 当 使 用 百分比 设 
定 大 小 时 ,表格 的 大 小 会 随 着 窗口 的 大 小 而 变化 。 

【实例 2-18〗 设置 表格 大 小 。 


<htm> 
<head> 
<title> 表 格 标题 < /title> 
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<body> 
<table border=1 width 208 height= 108 > 
<caption align=top> 图 书 列表 < /caption> 
志和 
<th> 书 名 < /th> 
<th> 数 量 </th> 
<th> 单 价 < /th> 
</tr> 
<tr> 
<td> Java Web 应 用 与 开发 < /td> 
<tad> 5000< /td> 
<td 32< /td 
< /tr> 
<tr> 
<tdcf .NET 程 序 开发 < /td> 
< tod> 3000< /td> 
<to> 35< /to> 
</tr> 
< /table> 
< /body> 
< /htm> 


2-20 是 在 HTML 文件 中 添加 了 以 百分比 来 表示 表格 大 小 代码 的 运行 效果 。 当 浏 


览 器 窗口 大 小 改变 时 表格 的 宽度 也 会 随 之 发 生变 化 。 


了 icrosoft Internet Explorer 
文件 @ 编辑 E) 查看 WW 收 豪 信 ) 工具 ) 于 助人 | 
@ 友 -日 - 国 国 的 Par 次 mx @| 全 -总 “ 
她 建国 | 全 c:\index. htnl 国 回 到 锋 殷 *” 


示 入 坦 要 雪 到 的 内 全 国 | 忆 扫 坟 -| 铝 国 知 国 ” 


» 


图 2-20 表格 大 小 
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一 、 选 择 题 
1. 利用 HTML 开发 静态 网 页 ,其 扩展 名 应 为 8 
A. .htm BB: wanir C. .asp D. 没有 严格 限制 
2. 标题 标记 符 hn 用 来 标识 文档 中 的 标题 的 大 小 ,其 中 标记 符 表示 最 大 的 
标题 。 
A. hl B, hs C. 86 BD; bh 
3. 在 HTML 中 创建 一 个 普通 的 表格 不 应 包括 标记 。 
A. table B. title Ct D. td 和 th 
4. 在 HTML 中 ,定义 有 序列 表 的 标记 是 
A. ul B. ol 人 .天 5 
5. 以 下 标记 中 ,成 对 使 用 的 标记 是 
A he> B <br> GC. ime > D. =title> 
二 、 阅读 下 列 代码 ,回答 问题 。 
<htm> 
<head> 
<title> 属 性 和 属性 值 < /title> 
< /head> 
<body> 
< span style= "color: # 0000FF; font- size: 18px"> Welome to BeiJing <br> 
< /span> 
<hr width= 100% size=5 color= red> 
< /body> 
</htm> 


1. 上 面 代码 中 有 哪些 HTML 标记 ? 

2. 上 面 的 标记 中 哪些 是 开始 标记 ? 哪些 是 结束 标记 ? 所 有 标记 都 既 有 开始 标记 又 
有 结束 标记 吗 ? 

3. span 的 属性 是 什么 ? 属性 值 是 什么 ? span 的 属性 是 加 在 开始 标记 中 还 是 结束 标 
记 中 人 
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CSS 语言 基础 


层 释 样式 表 (CSS) 是 一 种 制作 网 页 的 新 技术 ,为 大 多 数 的 浏览 器 所 支持 ,成 为 网 页 设 
计 必 不 可 少 的 工具 之 一 。CSS 技术 成 功 地 将 网 页 的 内 容 和 样式 分 离开 ,有 效 地 减少 了 网 
页 的 代码 量 , 实 现 了 统一 设计 网 页 的 样式 ,大 大 提升 了 网 页 开发 效率 。 本 章 将 对 CSS 语 
言 的 概况 和 基本 语法 进行 介绍 。 


本 章 学 习 要 点 : 


。 什么 是 CSS 
。 CSS 的 优点 
。 CSS 的 基本 语法 


3.1 CSS 简介 


CSS 是 Cascading Style Sheet 的 缩写 ,可 译作 ”* 层 三 样式 表 ”, 是 用 于 增强 或 控制 网 页 
样式 并 允许 将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 语言 。 现 在 已 经 为 大 多 数 的 浏览 器 
所 支持 ,成 为 网 页 设计 必 不 可 少 的 工具 之 一 。 

随 着 Internet 的 迅猛 发 展 ,HTML 被 广泛 应 用 ,网 页 越 来 越 丰富 ,但 HTML 的 排版 
和 界面 效果 的 局 限 性 日 益 暴 露出 来 ,HTML 代码 变 得 非常 脐 肿 ,而 且 内 容 与 样式 混在 一 
起 ,给 网 页 设计 者 造成 很 大 不 便 。 而 在 1996 年 年 底 CSS 技术 悄悄 诞生 , 它 向 世人 保证 将 
对 布局 .字体 .颜色 .背景 和 其 他 图 文 效果 实现 更 加 精确 的 控制 。CSS 的 主要 思想 就 是 将 
内 容 与 样式 相 分 离 ,HTML 只 包含 网 页 的 内 容 , 如 文字 、 图 片 . 动 画 、 超 链接 等 ;而 网 页 内 
容 的 显示 样式 由 CSS 定义 ,如 文字 的 大 小 、 字 体 、 颜 色 、 背 景 等 。 其 作用 可 以 达到 : 

(1) 在 几乎 所 有 的 浏览 器 上 都 可 以 使 用 。 

(2) 以 前 一 些 非 得 通过 图 片 转 换 实现 的 功能 ,现在 只 要 用 CSS 就 可 以 轻松 实现 ,从 而 
更 快 地 下 载 页 面 。 

(3) 使 页 面 的 字体 变 得 更 漂亮 ,更 容易 编排 ,使 页 面 真正 赏心悦目 。 

(4) 可 以 轻松 地 控制 页 面 的 布局 。 

(5) 可 以 将 许多 网 页 的 风格 格式 同时 更 新 ,不 用 再 一 页 一 页 地 更 新 。 可 以 将 站 点 上 


所 有 的 网 页 风格 都 使 用 一 个 CSS 文件 进行 控制 ,只 要 修改 这 个 CSS 文件 中 相应 的 位 置 ， 
那么 整个 站 点 的 所 有 页 面 都 会 随 之 发 生变 动 。 

目前 ,CSS 已 经 得 到 越 来 越 广泛 的 应 用 ,现实 中 绝 大 多 数 网 页 都 应 用 了 CSS 技术 ,而 
在 最 新 的 技术 趋势 ,如 基于 Web 标准 的 网 页 设计 思想 中 ,CSS 也 扮演 了 核心 角色 。CSS 
同 HTML 一 样 也 是 以 代码 形式 存在 的 ,要 想 真正 掌握 CSS, 需 要 从 代码 学 起 。 只 有 真正 
掌握 CSS 的 本 质 之 后 , 才 可 以 用 一 些 工 具 ,. 如 Dreamweaver 辅助 设计 CSS。 在 本 书 的 具 
体 学 习 过 程 中 ,为 降低 学 习 难 度 ,本 章 将 简单 地 介绍 一 下 CSS 的 相关 语法 知识 ,而 具体 的 
运用 将 在 第 9 章 中 结合 Dreamweaver 8. 0 来 介绍 。 


3.2 CSS 基本 语法 


CSS 的 定义 是 由 三 个 部 分 构成 : 选择 符 (selector)、 属 性 (properties) 和 属性 值 
(value) 。 基 本 格式 如 下 : 


选择 符 (selector) {属性 eroperty) : 值 value)} 


3.2.1 CSS 选择 符 


1. 标记 选择 符 


标记 选择 符 是 指 以 HTML 标记 为 名 称 的 选择 符 , 例 如 body、p、table、hl、h2 等 。 利 
用 标记 选择 符 可 以 对 网 页 文档 里 这 个 标记 出 现 的 每 一 个 地 方 应 用 样式 定义 ,这 种 做 法 通 
常用 在 设置 那些 在 整个 网 站 都 会 出 现 的 基本 样式 。 例 如 : body {color: blue} ,其 中 body 
就 是 标记 选择 符 , 指 页 面 主体 部 分 ,color 是 控制 文字 颜色 的 属性 ,blue 是 颜色 属性 的 值 ， 
注意 其 中 的 属性 和 值 要 用 冒号 隔 开 ,此 例 的 效果 就 是 使 页 面 中 的 文字 为 蓝 色 。 

如 果 属 性 的 值 是 多 个 单词 组 成 ,必须 在 值 上 加 引号 ,比如 字体 的 名 称 经 常 是 几 个 单词 
的 组 合 ,p { font-family: "Times New Roman")。 

另外 ,如 果 需 要 对 一 个 选择 符 指定 多 个 属性 时 ,要 使 用 分 号 将 所 有 的 属性 和 值 分 开 ， 
例如 : p { text-align: center; color: red) ,此 例 的 效果 是 使 段落 居中 排列 ,并 且 段 落 中 的 
文字 为 红色 。 

注意 : 标记 选择 符 的 名 字 必 须 是 已 有 的 HTML 标记 ,由 于 它 是 重新 定义 HTML 标 
记 的 显示 样式 ,所 以 它 不 需要 被 调用 ,网 页 中 的 相应 标记 会 自动 按照 重新 定义 后 的 
HTML 标记 进行 显示 。 


2. 类 选择 符 


用 类 选择 符 能 够 把 相同 的 元 素 分 类 定义 成 不 同 的 样式 ,定义 类 选择 符 时 ,需要 在 自 定 
义 类 的 名 称 前 面 加 一 个 点 号 (. )。 假 如 想 要 定义 两 个 不 同 的 段落 ,一 个 段落 向 右 对 齐 , 一 
个 段落 居中 对 齐 , 这 样 我 们 可 以 先 定义 两 个 类 ,分 别 为 : 
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Pp-right { text- align: right} 

p.center { text— align: center} 

然后 就 可 以 将 它们 用 在 不 同 的 段落 里 来 实现 不 同 的 对 齐 样式 ,方法 是 在 HTML 标 
记 里 加 入 定义 的 class 参数 ,例如 : 二 p class 一 "right" 之 … 扫 /p>, 这 就 表示 该 段落 是 向 
右 对 齐 的 ;而 二 p class 一 "center" 二 … 玫 /p 二 则 表示 该 段落 是 居中 对 齐 的 。 

类 选择 符 还 有 一 种 用 法 ,在 选择 符 中 省 略 HTML 标记 名 ,这样 就 可 以 把 几 个 不 同 的 
元 素 定义 成 相同 的 样式 。 例 如 : . center { text-align: center}, 即 定义 . center 的 类 选择 符 
为 文字 居中 排列 。 这 样 的 类 定义 好 后 就 可 以 被 应 用 到 任何 元 素 上 了 ,如 代码 二 hl class 
二 "center" 之 和 过 p class 二 "center" 就 是 定义 hl 元 素 ( 标 题 1) 和 p 元 素 ( 段 落 ) 都 为 
“center” 类 ,使 这 两 个 元 素 的 样式 都 跟随 *. center” 这 个 类 选择 符 ,都 是 居中 排列 的 。 

注意 : 类 的 名 称 可 以 是 任意 英文 单词 或 以 英文 开头 与 数字 的 组 合 , 一 般 以 其 功能 和 
效果 简要 命名 。 


3. ID 选择 符 


ID 的 含义 是 标识 ,ID 选择 符 可 以 标识 网 页 中 的 元 素 , 它 可 以 实现 的 功能 和 类 选择 符 
相似 。 与 类 选择 符 不 同 的 是 ,ID 选择 符 在 一 个 网 页 中 按照 规范 只 能 使 用 一 次 。ID 选择 
符 的 名 称 必须 以 # 开头, 下 面 将 定义 两 个 ID 选择 符 ,第 一 个 定义 元 素 的 颜色 为 红色 ,第 二 
个 定义 元 素 的 颜色 为 绿色 : 


# red { color: red;} 
# green { color: green;} 


如 何 使 用 上 面 定 义 的 两 个 ID 选择 符 呢 ? 下 面 的 HTML 代码 中 ,就 是 利用 了 ID 选 
择 符 red 将 p 元 素 显 示 为 红色 ,而 ID 选择 符 green 则 将 p 元 素 显 示 为 绿色 。 


<p id= "red"> 这 个 段落 是 红色 。< /p> 
<p ic "green"> 这 个 段落 是 绿色 。< /p> 


3.2.2 CSS 属性 

从 CSS 的 基本 语句 就 可 以 看 出 ,属性 是 CSS 中 非常 重要 的 部 分 。CSS 的 属性 和 属性 
值 都 是 由 国际 组 织 定义 的 ,CSS 属性 的 学 习 与 应 用 是 CSS 语法 的 重要 内 容 。 

1. 字体 属性 

字体 属性 是 最 基本 的 属性 ,主要 属性 如 表 3-1 所 示 。 

2. 颜色 和 背景 属性 

CSS 中 的 颜色 和 背景 主要 属性 如 表 3-2 所 示 。 
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表 3-1 常用 字体 属性 


属性 名 称 属性 含义 属性 值 示 例 
font-family 字体 名 称 所 有 字体 .sl {font-family: 黑 体 } 
font-size 字体 大 小 常用 单位 有 pt 和 px .s2 {font-size: 10pt} 
font-style 字体 风格 normal( 正 常 ) ,italic( 斜 体 ) .s3 {font-style: italic} 
font-weight 字体 粗细 normal( 正 常 ) ,bold( 加 粗 ) .s4 {font-weight: bold} 
color 字体 颜色 颜色 值 . 如 red、# ff0000 .s5 {color: green} 


表 3-2 常用 颜色 和 背景 属性 


属性 名 称 属性 含义 属性 值 示 例 
color 前 景色 | 各 种 颜色 值 p {color: green} 
background-color 背景 色 | 各 种 颜色 值 body {background-color: yellow} 
background-image 背景 图 案 | 图 片 所 在 路 径 body {background-image: fish. jpg} 


背 景 图 案 repeat-x, repeat- 


重复 方式 | y,no-repeat 
背景 图 案 


background-attachment scroll, fixed body {background-attachment: scroll} 


是 否 深 动 


background-repeat body {background-repeat: repeat-y} 


3. 文本 属性 
CSS 中 的 文本 主要 属性 如 表 3-3 所 示 。 
表 3-3 常用 文本 属性 


属性 名 称 属性 含义 属性 值 示 例 
text-align 文本 对 齐 方 式 ee ( 右 对 齐 )、 .tl {text-align: right} 


underline( 下 划 线 )、overline (上 
text-decoration 文本 修饰 方式 划 线 )、line-through (删除 线 )、 


.t2 {text-decoration: 


none( 无 ) underline} 

le 

line-height 定义 行 高 绝对 长 度 或 相对 长 度 .t3 {line-height: 120%} 
letter-spacing 定义 字 间 距 绝对 长 度 或 相对 长 度 .t4 {letter-spacing: 3mm)} 
word-spacing 定义 单词 间距 绝对 长 度 或 相对 长 度 .t5 {word-spacing: 8mm} 


3.3 插入 CSS 样式 表 


如 果 想 在 浏览 器 中 显示 出 效果 ,就 要 让 浏览 器 识别 并 调用 CSS 样式 。 这 里 介绍 四 种 
在 页 面 中 插入 CSS 样式 表 的 方法 : 内 许 样 式 、 内 部 样式 表 , 链 入 外 部 样式 表 和 导入 外 部 样 
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式 表 。 


3.3.1 内 谋 样 式 


内 徐 样 式 是 混合 在 HTML 标记 里 使 用 的 ,用 这 种 方法 ,可 以 很 简单 地 对 某 个 元 素 单 
独 定义 样式 。 内 内 样 式 是 通过 HTML 标记 的 style 参数 进行 CSS 的 定义 。 内 榜样 式 只 
对 所 在 的 标记 有 效 , 每 个 标记 都 有 一 个 style 参数 ,而 style 参数 的 内 容 就 是 CSS 的 属性 
和 值 。 内 艇 样式 在 现实 中 应 用 较 少 。 参 考 下 面 的 例子 ,其 显示 效果 如 图 3-1 所 示 。 


<htm> 
<head> 
<title> 内 蔡 样 式 < /title> 
< /head> 
<body> 
<P style= " font- size: 20pt; color: red > 
这 个 style 定 义 , 里 面 的 文字 大 小 是 20pt, 字 体 颜色 是 红色 。 
< 人 他 
</body> 
</htm> 


在 上 例 中 二 p style=="font-size: 20pt; color: red" 二 这 一 行 就 定义 了 一 个 内 艇 样式 ， 
样式 的 作用 范围 为 p 标记 的 内 部 。 


这 个 Style 定 义 ， 里 面 的 文字 大 小 
是 20pt， 字 体 颜 色 是 红色 。 


图 3-1 内 嵌 样 式 


3.3.2 内 部 样式 表 


内 部 样式 表 是 写 在 HTML 的 过 head 二 和 去 /head 二 中 间 的 ,用 二 style 二 标记 插入 。 
内 部 样式 表 只 对 所 在 的 网 页 有 效 ,其 中 定义 的 样式 不 能 被 其 他 网 页 引用 。 下 面 的 代码 应 
用 的 是 内 部 CSS ,在 浏览 器 中 的 显示 效果 如 图 3-2 所 示 。 


<htm> 
<head> 
<title> 内 部 样式 表 < /title> 
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和 内 部 样式 表 - Hicrosoft Internet Explorer COX 
文件 了， 编辑 (E) 查看 (Y) 收藏 和 ) 工具 CD) 帮助 | 万 
Ba- 昌国 国人 的 Pa 灾 wgx 加 | 全 - 电 


地 址 国 ) | 加 c:\Docunents and Settings\yoyo\ly Docunents\2. 国 | 回 苇 到 


图 3-2 内 部 样式 表 


< style type=" text/css "> 
.Sl { font- family: 咽 体 "; 
font- size: 36px; 
text- decoration:line- through; 
Color: green; } 
</style> 
< /head> 
<body> 
<p class="S1'> 插 入 内 部 样式 表 < /p> 
< /body> 
</htm> 


3.3.3 链 和 外 部 样式 表 


链 入 外 部 样式 表 是 把 样式 表 保 存 为 一 个 样式 表 文 件 , 然 后 在 页 面 中 用 过 link 之 标记 
链接 到 这 个 样式 表 文 件 , 这 个 过 link 二 标记 必须 放 在 页 面 的 二 head 二 区 内 ,格式 如 下 : 


<head> 

< link rel= "stylesheet" type= "text/css" href- "ss.css"> 

< [head> 

其 中 ,rel= "stylesheet" 是 指 在 页 面 中 使 用 外 部 的 样式 表 ,type 一 “text/css" 是 指 文 
件 的 类 型 是 样式 表 文 件 ,href= "ss. css" 是 指 外 部 样式 表 文 件 所 在 的 位 置 和 名 称 。 

一 个 外 部 样式 表 文 件 可 以 应 用 于 多 个 页 面 。 当 改变 这 个 样式 表 文 件 时 ,所 有 页 面 的 
样式 都 随 着 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 ,非常 有 用 ,不仅 减 少 了 重复 的 工作 
量 , 而 且 有 利于 以 后 的 修改 .编辑 ,浏览 时 也 减少 了 重复 下 载 代码 。 

样式 表 文 件 可 以 用 任何 文本 编辑 器 打开 并 编辑 ,一般 样 式 表 文件 扩展 名 为 . css, 内 容 
是 定义 的 样式 表 。 

如 下 两 段 代码 ,一段 是 定义 的 一 个 单独 的 CSS 文件 font. css, 男 一 段 是 链 入 CSS 文 
件 的 HTML 代码 ,其 在 浏览 器 中 的 显示 效果 如 图 3-3 所 示 。 

font. css 文件 的 内 容 : 


“Sl { fnt- size: 30r; 
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HTML 代码 如 下 : 


<htm> 
<head> 
<title> 链 入 外 部 样式 表 < /title> 
< link href= " font.css " rel= "stylesheet" type= "text/css"/> 
< /heac> 
<body> 
<p class="s1"> 应 用 外 部 样式 表 中 的 样式 sl < /p> 
<p class="s2"> 应 用 外 部 样式 表 中 的 样式 s2 < /p> 
< /body> 
</htm> 


号 链 入 外 部 样式 表 - Jicrosoft Internet Explorer 同 | 四 上 
文件 (E) 编辑 (E) 查看 (?) 收藏 (4) 工具 (T) 帮助 (8) [7 
@fa - 日 国 国 的 | 这 次 类 如 | 伯 " 盖 


地 古国 全 2:\Docunents and Settings\yoyo\ly Docunents\3.htnl 国 | 回 苇 到 


应 用 外 部 样式 表 中 的 样式 sl 


图 3-3 链 入 外 部 样式 表 


3.3.4 导入 外 部 样式 表 


导入 外 部 样式 表 是 指 在 内 部 样式 表 的 一 style 之 里 导入 一 个 外 部 样式 表 , 导 入 时 用 
@import, 如 下 代码 同样 可 以 实现 3. 3. 3 节 中 例子 的 效果 。 


<html> 

<head> 

<title> 导 人 外 部 样式 表 < /title> 
< style type= "text/css"/> 

@ inport url ("font.css") 

</style> 
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< [head> 
<body> 
<p class= "sl> 应 用 外 部 样式 表 中 的 样式 sl < /p> 
<p class="s2"> 应 用 外 部 样式 表 中 的 样式 s2 < /p> 
< /body> 
注意 : 使 用 时 导入 外 部 样式 表 的 路 径 、 导 入 方法 与 链 入 外 部 样式 表 的 方法 一 样 。 导 
入 外 部 样式 表 相当 于 将 样式 表 导 入 内 部 样式 表 中 ,其 输入 方式 更 有 优势 。 


3.4 习 题 


简 答题 


1. 下 列 哪 些 CSS 选择 符 名 称 是 正确 的 ,并 指出 它们 属于 哪 一 类 CSS 选择 符 ? 
(1) .stylel 

(2) td 

(3) .main_box 

(4) .table 

(5) #left 

(6) #7ab 

C7 5 

《8) S1 

(9) body 

(10) Img 

2. 定义 下 列 CSS 样式 ,样式 名 称 请 自己 定义 。 

(1) 字体 大 小 36px, 字 体 颜 色 #FF00CC , 行 高 3. 5em, 加 粗 。 
(2) 黑体 字 ,大 小 为 48pt, 文 字 带 有 下 划 线 ,对 齐 方式 为 右 对 齐 。 
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JavaScript 语言 基础 


JavaScript 是 目前 最 流行 的 Web 脚本 语言 ,用 于 开发 交互 式 的 动态 Web 页 面 , 它 不 
仅 可 以 直接 应 用 于 HTML 文档 以 获得 交互 式 效果 或 其 他 动态 效果 ,而 且 还 可 以 运行 于 
服务 器 端 。 本 章 介绍 有 关 JavaScript 作为 一 种 编程 语言 的 基础 知识 ,使 读者 能 初步 掌握 
该 语言 ,以 便 为 下 一 步 的 学 习 打下 扎实 的 基础 。 


本 章 学 习 要 点 : 


。 什么 是 JavaScript 
。 JavaScript 与 HTML 的 联系 
。 JavaScript 的 基本 语法 


4.1 JavaScript 概述 


JavaScript 是 由 Netscape 公司 开发 的 一 种 基于 对 象 和 事件 驱动 并 具有 安全 性 能 的 脚 
本 语言 ,有 了 JavaScript, 可 使 网 页 变 得 生动 。JavaScript 可 以 与 超 文本 标记 语言 
CHTML) Java 小 程序 或 者 JSP、ASP、PHP 等 Web 开发 语言 一 起 实现 在 一 个 Web 页 面 
中 与 Web 客户 交互 作用 ,处 理 多 个 对 象 ,从 而 灵活 开发 客户 端的 各 种 应 用 程序 。 
JavaScript 具有 如 下 优点 : 

(1) 简单 性 : JavaScript 是 一 种 脚本 编写 语言 , 它 采 用 小 程序 段 的 方式 实现 编程 , 像 
其 他 脚本 语言 一 样 ,JavaScript 同样 也 是 一 种 解释 性 语言 , 它 提供 了 一 个 简易 的 开发 过 
程 , 不 需要 计算 机 语言 编译 器 就 可 以 直接 运行 在 多 种 网 页 浏览 器 中 。 并 且 与 HTML 标 
记 结 合 在 一 起 ,从 而 方便 用 户 的 使 用 操作 。 

(2) 动态 性 : JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 的 输入 做 出 响应 ,无 需 
经 过 Web 服务 程序 。 它 对 用 户 的 反映 响应 ,是 采用 以 事件 驱动 的 方式 进行 的 。 所 谓 事件 
驱动 ,就 是 指 在 主页 中 执行 了 某 种 操作 所 产生 的 动作 ,比如 按 下 鼠标 、 移 动 窗口 .选择 菜单 
等 都 可 以 视 为 事件 。 当 事件 发 生 后 ,可 能 会 引起 相应 的 事件 响应 。 

(3) 跨 平台 性 : JavaScript 是 依赖 于 浏览 器 本 身 , 与 操作 环境 无 关 , 只 要 能 运行 浏览 
器 的 计算 机 ,并 支持 JavaScript 的 浏览 器 就 可 以 正确 执行 。 


(4) 安全 性 : JavaScript 是 一 种 安全 性 较 强 的 语言 , 它 不 允许 访问 本 地 的 磁盘 ,不 允 
许 将 数据 存 人 服务 器 上 ,不 允许 操作 网 络 文档 (如 进行 修改 和 删除 ) ,只 能 通过 各 种 浏览 器 
进行 信息 浏览 或 动态 交互 的 实现 ,从 而 有 效 地 防止 数据 的 丢失 。 

JavaScript 在 Web 中 的 作用 也 是 多 方面 的 ,可 从 以 下 几 个 方面 得 到 体现 : 

(1) 可 以 为 Web 页 增加 特殊 效果 动画 或 标志 ; 

(2) 可 以 在 客户 端 独立 完成 数据 的 验证 ; 

(3) 用 于 建立 客户 /服务 器 应 用 程序 ; 

(4) 开发 客户 端 程序 ; 

(5) 将 HTML 对 象 Java 小 应 用 程序 、ActiveX 控件 和 Netscape 插件 组 合 在 一 起 使 
Web 网 页 发 挥 强大 作用 。 


4.2 JavaScript 与 HTML 


JavaScript 的 最 大 特点 就 是 和 HTML 的 结合 。JavaScript 代码 总 是 和 HTML 一 起 
使 用 的 , 当 HTML 文档 在 浏览 器 中 被 打开 时 ,JavaScript 代码 才能 被 执行 。 脚 本 程序 既 
可 以 直接 嵌入 到 HTML 文档 中 ,也 可 以 用 链接 的 方式 将 脚本 程序 和 HTML 文档 结合 
起 来 。 


4.2.1 使 用 二 script 二 … 达 /script 二 标记 


JavaScript 代码 使 用 HTML 标记 和 过 script 之 … 所 /script 二 集成 到 HTML 文档 中 。 
在 一 个 HTML 文档 中 ,可 以 有 多 对 过 script 二 … 志 /Script 之 标记 来 嵌入 多 段 JavaScript 
代码 ,每 个 JavaScript 代码 中 可 以 包含 一 条 或 多 条 JavaScript 语句 。 script 之 … 
去 /script 盖 标记 从 理论 上 来 讲 , 可 以 插 到 HTML 文档 中 的 任何 位 置 ,比如 在 二 head 之 和 
所 /head> 之 间或 是 王 body 之 和 过/body 二 之 间 , 但 按照 多 数 人 的 习惯 , 常 将 该 标记 放 在 
所 head 之 和 所 /head> 之 间 。 

三 script 记 … 达 /script 二 标记 在 HTML 文档 中 主要 有 两 个 作用 : 一 是 在 页 面 中 标识 
一 块 脚本 代码 ;二 是 加 载 一 个 脚本 文件 , 它 主要 依赖 于 src 属性 。 该 标记 的 主要 属性 及 其 
作用 如 表 4-1 所 示 。 


表 4-1 一 script 二 标记 的 主要 属性 


属 性 作 用 
defer 用 于 告诉 浏览 器 脚本 是 否 有 输出 内 容 , 属 性 值 为 boolean 值 
language 用 于 指定 脚本 使 用 的 语言 
sre 指定 使 用 的 外 部 JavaScript 代码 的 URL 地 址 
type 代替 language 属性 .用 于 指明 脚本 使 用 的 语言 
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1. defer 属性 


defer 是 一 个 简单 的 属性 , 它 的 作用 就 是 告诉 浏览 器 JavaScript 代码 是 否 会 产生 输 
出 ,也 可 以 说 document. write( ) 方 法 是 否 被 使 用 。 下 面 是 一 个 简单 的 例子 : 

< script type= "text/JavaScript" defer> 

// 仅仅 声明 一 个 变量 ,没有 输出 语句 

var 到 100 


< /script> 
2. language 属性 


language 属性 在 最 近 的 HTML 和 XHTML 中 已 经 不 再 使 用 ,但 为 了 使 以 前 的 Web 
也 仍 能 够 不 加 修改 就 可 以 在 浏览 器 中 正确 地 显示 ,所 以 现在 的 过 script 之 标记 仍 保留 了 
language 属性 。language 属性 的 值 告诉 浏览 器 应 该 按照 哪 一 种 语言 的 版 本 来 执行 脚本 
代码 ,例如 ;过 script language 王 "JavaScript" 二 ,该 标记 则 告诉 浏览 器 脚本 使 用 的 是 
JavaScript 1. 0。 如 果 是 使 用 其 他 版 本 的 JavaScript, 如 JavaScript 1. 1, 可 以 按 格式 
过 script language 一 "JavaScript 1. 1" 过 来 使 用 。 如 果 在 过 script 二 中 没有 使 用 language 
属性 , 则 浏览 器 会 默认 使 用 JavaScript 1. 0。 


3. src 属性 


使 用 二 script 二 的 src 属性 是 为 了 能 在 一 个 HTML 文档 中 引用 另 一 个 文件 中 的 
JavaScript 代码 ,此 时 的 JavaScript 代码 是 存放 于 一 个 单独 的 . js 文件 中 。 使 用 该 属性 的 
好 处 就 在 于 可 以 在 不 打开 HTML 文件 的 情况 下 修改 JavaScript 代码 ,但 它 的 一 个 缺陷 是 
代码 的 修改 可 能 影响 到 HTML 文档 ,比如 当 修改 了 .js 文件 中 的 函数 名 之 后 ,就 必须 修 
改 HTML 文档 中 用 到 的 函数 名 ,否则 HTML 文档 将 会 出 错 。 使 用 src 的 另 一 个 好 处 就 
是 可 以 保护 JavaScript 代码 ,不 让 别人 看 到 。 


4. type 属性 


在 最 近 的 HTML 和 XHTML 中 已 不 再 使 用 language 属性 ,取而代之 的 是 type 属 
性 。type 属性 的 使 用 格式 如 下 : 


< script type= "text/JavaScript"> 
< Script type= "text/VBScript> 
4.2.2 在 HTML 中 诗人 JavaScript 


将 JavaScript 代码 嵌入 HTML 文档 有 两 种 方式 : 一 种 是 内 联 方式 , 即 直 接 将 代码 书 
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写 在 HTML 文档 中 ,下 面 是 一 个 简单 的 例子 ,其 在 浏览 器 中 的 显示 效果 如 图 4-1 所 示 。 


<htm> 

<head> 
< script language= "javascript"> 

aocument. write ("Hello World!"); 

< /script> 

< /heac> 

<body> 

< /body> 

</htm> 


C:\Documents and Settings\yoyo\ly Documents\... 


文件 (E) 编辑 (E) 查看 (Y) 收藏 (4) 工具 (T) 帮助 (8) 
@FE - 日- 国 国 的 | 局 媒 灾 kg 四 | 下- 下“ 


地 下 吕 | 加 c:\Docunents and Settings\yoyo\ty Docunents\0l 国 | 回 鞭 到 


Hello World! 


图 4-1 显示 Hello World! 


另 一 种 是 外 联 方式 , 即 先 将 JavaScript 代码 放 在 单独 的 .js 文件 中 ,然后 再 在 HTML 
文档 中 利用 和 script 之 标记 的 src 属性 进行 调用 ,使 用 该 方法 可 以 将 同一 个 JavaScript 代 
码 运 用 到 不 同 的 网 页 中 。 在 下 面 的 HTML 文档 中 引用 了 在 另 一 个 文件 test. js 中 的 
JavaScript 代码 。 

<html> 

<head> 
< script src= "test.js"> < /script> 
< /head> 
<body> 
< /body> 
</htm> 


在 该 HTML 文档 中 没有 任何 将 在 浏览 器 中 显示 的 信息 ,但 通过 引用 另 一 个 文件 中 
的 JavaScript 代码 ,在 浏览 器 中 输出 了 一 段 信息 。 被 引用 的 test. js 文件 内 容 如 下 : 


Gopcument.write ("Hello World!") 


注意 : 在 外 部 文件 中 不 能 再 包含 二 script 汪 标记 ,还 可 以 把 .js 文件 放 到 网 站 目录 中 
通常 存放 脚本 的 子 目 录 中 ,这 样 更 容易 管理 和 维护 。 


网 站 开发 与 设计 教程 


4.3 JavaScript 的 语法 


JavaScript 同 其 他 语言 一 样 ,有 它 自身 的 基本 数据 类 型 ,表达 式 和 运算 符 以 及 程序 的 
基本 框架 结构 。 


4.3.1 基本 数据 类 型 


在 JavaScript 中 有 4 种 基本 的 数据 类 型 。 

(1) 数字 型 : 整数 和 实数 。 

(2) 字符 串 型 : 用 "" 和 ' 笑 起 来 的 字符 或 数值 。 

(3) 逻辑 型 : 用 True 或 False 表示 。 

(4) 空 值 : 表示 什么 也 没有 。 

在 JavaScript 的 基本 类 型 中 ,数据 可 以 是 常量 ,也 可 以 是 变量 。 由 于 JavaScript 采用 
弱 类 型 的 形式 ,因而 一 个 数据 的 变量 或 常量 不 必 首 先 声明 ,而 是 在 使 用 或 赋值 时 确定 其 数 
据 的 类 型 。 当 然 也 可 以 先 声 明 该 数据 的 类 型 。 


4.3.2 常量 
在 程序 运行 过 程 中 ,其 值 不 能 被 改变 的 量 称 为 常量 。 常 量 可 根据 不 同类 型 分 为 整 型 
1. 整 型 和 实 型 常量 


整 型 常量 由 整数 表示 ,如 123, 一 2000, 也 可 以 使 用 十 六 进 制 . 八 进 制 表示 其 值 。 实 型 
常量 是 由 整数 部 分 加 小 数 部 分 表示 ,如 123. 45、 一 3. 14, 也 可 以 使 用 指数 方法 表示 ,如 
3e2 .4E 一 10。 


2. 字符 型 常量 

使 用 双 引 号 "" 或 单 引 号 ' 笑 起 来 的 一 个 字符 或 字符 串 ,如 "Hello world!" .abc'。 
3. 逻辑 常量 

逻辑 常量 只 有 True( 真 ) 和 False( 假 ) 两 种 值 。 往 往 用 做 程序 的 判断 条 件 。 

4. 空 值 

JavaScript 还 提供 一 个 空 值 null, 表 示 什 么 也 没有 。 
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4.3.3 变量 


在 程序 运行 过 程 中 ,其 值 可 以 改变 的 量 称 为 变量 。 一 个 变量 由 变量 名 和 变量 值 构成 。 
F 变量 必须 明确 变量 的 命名 、 变 量 的 声明 和 变量 的 类 型 。 


1. 变量 的 命名 


(1) 必须 以 字母 (a~z 或 A 一 Z) 或 下 划 线 (_) 开 头 ,其 他 的 字符 可 以 用 字母 .下 划 线 或 
数字 (0 一 9) ,变量 名 中 不 能 有 除 下 划 线 外 的 其 他 特殊 字符 。 

(2) 不 能 使 用 JavaScript 中 的 关键 字 作 为 变量 ,如 Var int \true。 

(3) 在 对 变量 命名 时 ,应 尽量 使 变量 名 有 意义 ,从 而 增加 程序 可 读 性 ,减少 错误 产生 。 

(4) JavaScript 变量 名 是 区 分 大 小 写 的 ,不 同 大 小 写 的 变量 ,例如 ,sum、Sum、SUM 
都 将 视 为 不 同 的 变量 。 


2. 变量 的 声明 


一 般 在 使 用 一 个 变量 前 ,应 该 事先 对 变量 进行 声明 。 在 JavaScript 中 ,变量 可 以 用 关 
键 字 Var 作 声明 。 例 如 声明 一 个 名 为 numl 的 变量 ,其 声明 格式 如 下 : 


| 


对 


< script> Var numl < /script> 


在 变量 声明 时 可 以 同时 给 该 变量 值 赋 初 值 ,例如 让 变量 numl 的 初 值 为 10, 代 码 
如 下 : 


< script> Var numl= 10 < /script> 


另外 ,在 同一 行 中 可 以 声明 多 个 变量 ,变量 与 变量 之 间 用 逗号 隔 开 。 例 如 在 同一 行 中 
声明 变量 numl ,num2 .num3 ,代码 如 下 : 


< script> Var numl，numr2，nunrB < /script> 


在 JavaScript 中 ,变量 也 可 以 不 作 声明 ,而 是 在 使 用 时 根据 赋值 的 类 型 来 确定 变量 的 
类 型 。 


3. 变量 的 类 型 


JavaScript 是 一 种 弱 类 型 的 语言 ,变量 的 类 型 不 像 其 他 语言 那样 规定 的 比较 死 , 对 于 
同一 变量 可 以 赋 不 同类 型 的 变量 值 。 例 如 : 


其 中 ,变量 numl 先 被 赋 初 值 10, 此 时 numl 的 类 型 是 整 型 , 接 下 来 又 把 字符 串 abc 赋 给 
了 numl, 此 时 numl 的 类 型 又 变 成 了 字符 型 。 这 些 在 JavaScript 语言 中 都 是 允许 的 ,所 
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以 一 般 可 以 不 必 关 心 变量 是 什么 类 型 的 。 
4.3.4 运算 符 


运算 符 是 完成 操作 的 一 系列 符号 ,也 称 为 操作 符 。 使 用 运算 符 的 值 称 为 算 子 或 操作 
数 ,根据 操作 数 的 多 少 可 以 把 运算 符 分 为 单 目 运算 符 、 双 目 运算 符 和 三 目 运算 符 。 大 多 数 
JavaScript 运算 符 都 是 双 目 运算 符 , 即 具有 两 个 操作 数 的 运算 符 ,通常 以 “操作 数 1 运算 
符 ”操作 数 2” 方 式 进行 操作 ;而 单 目 运算 符 是 只 需要 一 个 操作 数 的 运算 符 , 此 时 运算 符 
可 以 在 操作 数 前 ,也 可 以 在 操作 数 后 。 

在 JavaScript 中 包括 以 下 几 类 运算 符 : 


1. 算术 运算 符 


(1) 双 目 运算 符 : 十 (加 ) ,一 ( 减 )、x ( 乘 )、/( 除 )、%( 取 模 )。 

(2) 单 目 运算 符 : 十 十 ( 递 加 1 并 返回 数值 或 返回 数值 后 递 加 1, 取 决 于 运算 符 的 位 
咎 在 操作 数 前 还 是 后 ) ,一 一 (递减 1 并 返回 数值 或 返回 数值 后 递减 1, 取 决 于 运算 符 的 位 
置 在 操作 数 前 还 是 后 ) 。 


2. 逻辑 运算 符 
(1) 双 目 运算 符 &&: 修 辑 与 。 只 有 当 两 个 操作 数 的 值 都 为 true 时 ,结果 才 为 true， 


否则 为 false) 、| | (逻辑 或 ,只 要 两 个 操作 数 中 其 中 有 一 个 值 为 true, 结 果 就 为 true。 
(2) 单 目 运算 符 !: 逻辑 非 。!true 的 值 为 false, !false 的 值 为 true。 


3. 比较 运算 符 


比较 运算 符 都 是 双 目 运算 符 , 即 : 二 (小 于 ) ,二 (大 于 ) .二 = (小 于 等 于 ) 二 =( 大 于 
等 于 ) ,二 二 (等 于 )、!=( 不 等 于 )。 


4. 字符 串 运 算 符 


在 JavaScript 中 ,只 有 一 种 字符 串 运 算 符 一 一 字符 串 加 运算 符 (十 )。 该 运算 符 与 加 
法 运算 符 相 同 , 但 在 进行 字符 串 操 作 时 ,结果 是 将 两 个 字符 串 结 合 起 来 。 例 如 :"120" 十 
"100" 二 "120100" 中 的 “十 ”号 不 是 算术 运算 符 ,而 是 字符 串 的 连接 符号 。 


5. 位 操作 运算 符 


用 于 对 数值 的 二 进 制 位 进行 操作 ,包括 : &( 按 位 与 ,两 个 操作 数 的 相应 位 都 为 1 时 ， 
该 位 的 结果 为 1 ,否则 为 0)、| ( 按 位 或 ,两 个 操作 数 的 相应 位 有 一 个 为 1, 则 该 位 的 结果 为 
1)、^( 按 位 异 或 ,两 个 操作 的 相应 位 不 同时 ,该 位 的 结果 为 1)、 二 二 ( 左 移 , 左 移 的 位 数 由 
第 二 个 操作 数 决 定 )、 二 二 ( 右 移 , 右 移 的 位 数 由 第 二 个 操作 数 决定 )、 二 二 二 (无 符号 
右 移 )。 
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6. 赋值 运算 符 


常用 的 赋值 运算 符 有 : 一 (赋值 )、 十 一 (将 左右 两 个 操作 数 的 和 赋值 给 左 操作 数 )、 一 
(将 左 操作 数 减 去 右 操作 数 的 结果 值 赋 给 左 操作 数 )、x 一 (将 左右 操作 数 的 乘积 结果 值 赋 
给 左 操作 数 ) 、/ 三 (将 左 操作 数 除 以 右 操 作 数 的 结果 值 赋 给 左 操作 数 )、% 二 (将 左右 操作 
数 的 模 运 算 结果 值 赋 给 左 操作 数 ) 。 


7. 条 件 运 算 符 


JavaScript 支持 的 一 种 特殊 的 三 目 运算 符 , 其 格式 为 : 条 件 ? 结果 1 : 结果 2。 该 格 
式 表 示 若 “条 件 ” 为 真 , 则 表达 式 的 值 为 “结果 1”, 否 则 为 "结果 2”。 


4.4 JavaScript 语句 


在 任何 一 门 编程 语言 中 ,程序 的 多 辑 都 是 通过 编程 语句 来 实现 的 。 在 JavaScript 中 
包含 完整 的 一 组 编程 语句 ,用 于 实现 基本 的 程序 控制 和 操作 功能 。 


4.4.1 条 件 语句 

条 件 语句 可 以 使 程序 按照 预先 指定 的 条 件 进 行 判断 ,从 而 选择 执行 任务 。 在 
JavaScript 中 提供 了 话语 句 ,if else 语句 以 及 switch 语句 等 三 种 条 件 语 句 。 

1. 证 语句 

if 语句 是 最 基本 的 条 件 语 句 , 它 的 格式 为 : 


if (表达 式 ) 
语句 ; 


也 就 是 说 ,如 果 括 号 里 的 表达 式 为 真 , 则 执行 语句 ,否则 就 跳 过 该 语句 。 如 果 要 执行 
的 语句 只 有 一 条 ,那么 可 以 写 在 与 ff 所 在 的 同一 行 ,例如 : 


if (a==1) at+; 

如 果 要 执行 的 语句 有 多 条 , 则 应 使 用 大 括号 将 这 些 语句 括 起 来 ,例如 : 
if (a==1) {at+; bt+;} 

2. if else 语句 


如 果 需 要 在 表达 式 为 假 时 执行 另 一 个 语句 , 则 可 以 使 用 else 关键 字 扩 展 证 语句 。i 计 
else 语句 的 格式 为 : 


if (表达 式 ) 
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3. switch 语句 
如 果 需 要 对 同一 个 表达 式 进 行 多 次 判断 ,那么 就 可 以 使 用 switch 语句 ,格式 如 下 : 


switch (表达 式 ) 

{ case valuel: 语句 1; 
break; 
case value2: 语句 2; 
break; 


case valueN: 语句 N; 
break; 
default: 语句 ; 

} 


【实例 4-1】 判断 一 个 数 是 奇数 还 是 偶数 。 该 例 显示 效果 如 图 4-2 所 示 。 
分 析 : 对 这 个 数 进行 除 以 2 求 余数 ,如 果 余数 


习 奇偶 数 判 断 - Wicrosoft Intern... |- | 口 [X| 


为 0, 则 表示 这 个 数 是 偶数 ,否则 为 奇数 。 文件 (E) 编辑 (E) 查看 () 收藏 (4) 工具 (I 
代码 如 下 : 昌 四 - 国 国 的 有 忆 姻 


闻 泪 (D) 各 Cc:\Docunents and settings\yo 国 | 回 寺 到 


<html> 
<head> 
<title> 奇 偶数 判断 < /title> 
<body> 
< script type= "text/javascript"> 
var i; 
1 
if(i%2==0) 
document .write(i+ "是 偶数 "); 
else 
document .write(i+ "是 奇数 "); 
< /script> 
< /body> 
< /htm> 


【实例 4-2】 把 一 个 表示 星期 的 数字 转换 为 相应 的 字符 串 。 该 例 显示 效果 如 图 4-3 


图 4-2 奇偶 数 判断 实例 效果 


所 示 。 


代码 如 下 : 


<html> 
<head> 
<title> 星 期 转换 < /title> 
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<body> 


i EE 2 [ed| 
< script type= "text/javascript"> 文件 (E) 编辑 (E) 查看 (1) 收藏 (4) 工具 (I ”| 万 


@FE- 日: 国 图 的 | 用 二 > 


屯 赴 国 全 Cc:\Docunents and settinges\yo 国 | 四 转 到 


Var weekday; 
var string; 
weekday= 37 
switch (weekday) 
{ 
case 0: string=" 星 期 日 "; break; 
case 1: string= "星期 一 "; break; 
case 2: string= "星期 二 "; break; 
case 3: string= "星期 三 "; break; 
case 4: string=" 星 期 四 "; break; 
case 5: string= "星期 五 "; break; 
case 6: string= "星期 六 "; break; 
} 
document .write(" 今 天 是 "+ string); 
< /script> 
< /body> 
< /html> 


4.4.2 循环 语句 


循环 语句 用 于 在 一 定 条 件 下 重复 执行 某 段 代码 。 在 JavaScript 中 提供 了 多 种 循环 语 
句 : for 语 句 、while 语句 以 及 do while 语句 ,同时 还 提供 了 break 语句 用 于 跳出 循环 ， 
continue 语句 用 于 终止 当前 循环 并 继续 执行 下 一 轮 循 环 。 


1. for 语句 
for 语句 的 格式 如 下 : 


for (初始 化 ;条 件 ; 增 量 ) 
循环 语句 ; 


可 以 看 出 ,for 语句 由 两 部 分 构成 : 条 件 和 循环 体 。 循 环 体 部 分 由 具体 的 语句 构成 ， 
是 需要 循环 执行 的 代码 。 条 件 部 分 由 括号 括 起 来 ,分 为 三 个 部 分 ,每 个 部 分 用 分 号 分 开 。 
第 一 部 分 是 计数 器 变量 初始 化 部 分 ;第 二 部 分 是 循环 判断 条 件 ,决定 了 循环 的 次 数 ;第 三 
部 分 给 出 了 每 循环 一 次 ,计数 器 变量 应 如 何 变化 。 

for 循环 的 执行 步 又 如 下 : 

(1) 执行 初始 化 语句 ,完成 计数 器 初始 化 ; 

(2) 判断 条 件 表达 式 是 否 为 true, 如 果 为 true, 执 行 循环 体 语句 ,否则 退出 循环 ; 

(3) 执行 循环 体 语句 之 后 ,执行 增 量 语句 ; 

(4) 重复 步 又 (2) 和 (3) ,直到 退出 循环 。 
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偶数 的 求 和 。 该 例 显示 效果 如 图 4-4 所 示 。 


2. while 语句 
while 语句 是 另 一 种 基本 的 循环 语句 ,格式 如 下 : 
while (表达 式 ) 
. 
循环 语句 ; 
} 
while 循环 的 执行 步 又 如 下 : 
(1) 计算 表达 式 的 值 ; 
(2) 如 果 表 达 式 的 值 为 true, 则 执行 循环 体 语句 ;否则 跳出 循环 ; 
(3) 重复 步骤 (1) 和 (2) ,直到 跳出 循环 。 


3. do while 语句 


do while 语句 是 while 语句 的 变 体 ,格式 如 下 


Go 
{ 
循环 语句 ; 
} while (表达 式 ) 
它 的 执行 步骤 如 下 : 
(1) 执行 循环 体 语句 ; 
(2) 计算 表达 式 的 值 ; 
(3) 如 果 表 达 式 的 值 为 真 , 则 执行 循环 体 语句 ,否则 退出 循环 ; 
(4) 重复 步骤 (2) 和 (3) ,直到 退出 循环 。 
可 见 do while 语句 与 while 语句 的 区 别 是 循环 体 语句 至 少 执 行 一 次 ,因为 在 while 


语句 中 ,如 果 第 一 次 表达 式 计算 的 值 就 为 false, 则 循环 一 次 都 不 执行 。 除 此 之 外 ,这 两 种 
语句 并 没有 其 他 区 别 。 


4. break 和 continue 语句 


有 匀 偶数 求 和 - 1Gcrosoft Internet...[- 器 人 区 | 
使 用 break 语句 可 以 使 循环 从 for 或 while 中 【「 广 #@ 纳 竹 四 坦 看 Q) 屎 计 ) 工具 I ”| 以 


跳出 ,continue 语句 可 以 跳 过 循环 内 剩余 的 语句 而 |@F5s -日 - 国 四 @Pax “ 
进入 下 一 次 循环 地 址 (0) 全 ings\yoyo\ty Docunents\3.htn 国 | DE 
和 为 : 2550 


【实例 4-3】 利用 for 循环 ,实现 100 以 内 所 有 


代码 如 下 : 


<htm> 


<head> 
<title> 偶 数 求 和 < /title> 图 4-4 偶数 求 和 实例 效果 
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<bodqy> 
< script type= "text/javascript"> 
Var i; 
Var Sumv 
Sue 0; 
for(i=0; i<=100; i=i+2) 
Sume sumt i; 
document .write ("和 为 :"+ sum); 
< /script> 
< /body> 
</htm> 


【实例 4-4】 利用 while 循环 ,实现 上 例 100 以 内 偶数 的 求 和 。 
代码 如 下 : 


<htm> 
<head> 
<title> 侦 数 求 和 < /title> 
<body> 
< script type= "text/javascript"> 
var i; 
i=0; 
Var sim 
Sum= 0; 
while(i<= 100) 
{ 
Sie sumt i; 
i=it+2; 
3 
document .write(" 和 为 :"+ sum); 
< /script> 
< /body> 
</htm> 


【实例 4-5】 比较 下 列 两 段 代 码 , 区 分 break 语句 和 continue 语句 的 用 法 。 代 码 1 显 
示 效 果 如 图 4-5 所 示 ,代码 2 显示 效果 如 图 4-6 所 示 。 
代码 1: 


<htm> 

<head> 

<title> 使 用 break 语 句 < /title> 

<body> 

< script type= "text/javascript"> 
var i; 


for(i=1; i<=10; i++) 
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{ 
if(i% 于 =0) 
break; 
else 
Gociment .write(i+" "); 
$ 
< /script> 
< /body> 
</htm> 


代码 2: 


<htm> 
<head> 
<title> 使 用 continue 语 句 < /title> 
<body> 
< script type= "text/javascript"> 
var i; 
for(i=1; i<=10; i++) 
{ 
if(i%5=0) 
continuey 
else 
document .write (i+ " "); 
+ 
</script> 
< /body> 
< /htm> 


加 使 有 break 语句 - Microsoft Int... 加 回电 鱼 使 用 continue 语 句 - Microsoft ...[ 回 风 
文件 (FE) 编辑 (E) 查看 (Y) 收藏 ) 工具 I ” 文件 (E) 编辑 (E) 查看 (Y) 收藏 地) 工具 (I ” 
四 错 四- 国 国 的 | 万 好 @@ 醒 -加 - 国 国 的 | 甩 姻 

地 站 四) 地 直人 ) 


1234 12346789 


图 筑 | | | 计 RR | 
图 4-5 使 用 break 语句 结果 图 4-6 ”使 用 continue 语句 结果 


本 例 实现 1 一 10 的 输出 显示 ,但 在 循环 中 设置 了 一 个 退出 条 件 (i%5 二 二 0), 即 i 是 5 
的 倍数 , 当 满 足 这 个 条 件 时 则 分 别 用 break 语句 和 continue 语句 进行 退出 ,从 显示 结果 可 
以 看 出 , 当 使 用 break 语句 退出 时 .本 例 循环 只 执行 了 4 次 , 当 i 等 于 5 时 ,循环 就 结束 了 ; 
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但 使 用 continue 语句 退出 时 ,循环 共 执行 了 8 次 ,只 有 当 i 等 于 5 和 10 时 ,跳出 了 循环 。 
4.5 习 题 


一 、 程 序 设 计 题 
1. 在 网 页 上 显示 100 以 内 所 有 整数 的 总 和 。 
2. 在 网 页 上 显示 10! 的 值 。 


二 、 简 答题 


1. 简要 概述 JavaScript 的 特点 。 
2. 描述 JavaScript 与 HTML 的 关系 。 
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认识 Dreamweaver 8.0 


Dreamweaver 8. 0 是 Macromedia 公司 推出 的 一 款 专业 级 网 页 设计 软件 , 它 采 用 多 种 
先进 技术 ,能够 快速 高 效 地 制作 出 精美 且 内 容 丰 富 的 网 页 。 对 于 那些 不 慌 HTML, 也 没 
有 学 过 程序 设计 的 用 户 很 容易 上 手 , 因 为 它 既 可 以 在 可 视 化 的 编辑 环境 中 开展 页 面 的 制 
作 工 作 , 也 可 以 通过 它 提 供 的 HTML 代码 编辑 器 来 手工 编写 HTML 代码 。 除 了 制作 网 
页 外 ,Dreamweaver 还 具有 站 点 管理 功能 ,通过 这 一 功能 ,用 户 可 以 有 效 地 管理 站 点 。 


本 章 学 习 要 点 : 


。 Dreamweaver 8.0 的 工作 环境 
。 创 建站 点 
。 网 页 文档 的 基本 操作 


5.1 Dreamweaver 8.0 的 工作 环境 


学 习 具 体内 容 之 前 , 先 来 了 解 一 下 Dreamweaver 8. 0 的 工作 环境 ,熟悉 工作 环境 ,对 
学 习 Dreamweaver 有 很 大 帮助 。 


5.1.1 启动 Dreamweaver 8.0 


安装 好 Dreamweaver 8.0 后 , 单 击 “ 开 始 ” 一 “程序 ”一 “Macromedia” 一 “Macromedia 
Dreamweaver 8” 命 令 , 即 可 启动 Dreamweaver 8. 0。 

启动 Dreamweaver 后 ,系统 首先 弹出 “工作 区 设置 "界面 ,如 图 5-1 所 示 。 一 般 情况 
下 ,只 有 第 一 次 启动 Dreamweaver 的 时 候 才 会 让 用 户 选 择 工作 界面 。Dreamweaver 8.0 
提供 了 两 种 工作 界面 : 设计 器 和 编码 器 。 

(1) 设计 器 : 一 个 使 用 多 文档 界面 的 集成 工作 区 ,其 中 全 部 文档 窗口 和 面板 集成 在 
一 个 更 大 的 应 用 程序 窗口 中 ,面板 组 停靠 在 右 侧 ,适用 于 一 般 用 户 和 初级 用 户 ; 

(2) 编码 器 : 也 是 一 个 集成 工作 区 ,但 是 面板 组 停靠 在 左 侧 ,而 且 “ 文 档 " 窗 口 在 默认 
情况 下 显示 “代码 ”视图 ,适用 于 具有 高 水 平 编程 技术 的 用 户 。 


工作 区 设置 
选择 您 首选 的 工作 区 布局 。 您 可 在 以 后 选择 “窗口 》 工 作 区 布局 ”来 更 改 布局 


口 编码 器 (C) 


图 5-1 “工作 区 设置 对话 框 


本 教程 后 续 章 节 中 的 操作 均 是 在 “设计 器 "工作 区 下 完成 。 
5.1.2 Dreamweaver 8.0 操作 界面 


启动 Dreamweaver 8.0 后 首先 进入 的 是 Dreamweaver 的 起 始 界 面 ,如 图 5-2 所 示 。 


ET 
文件 四 ” 编 独 伍 ) 到 
a 屿 加 


诊 邻 (C)】 好 点 (5) 窗 日 {队友 助 (0 


Ec M4 
月 - 旺 我 的 电脑 
加 是 网 上 部 居 
FTP & RDS 服务 器 
月 -器 息 耐 项 目 
六 ASP vBserint 
多 ASPNET Or © Et He 
区 Janasorol 
更 XML 
庄 X8LT( 吾 页) 
匡 css 
Dreamrwearer 让 扩展 
Ds. 


* 进入 Droamwoaver 快速 扫 有。 
人 


“， 查找 授权 后 训 


| nil 田 
EE 


图 5-2 Dreamweaver 8.0 起 始 界 面 


在 起 始 界 面 中 ,可 以 创建 各 种 类 型 的 新 项 目 ,也 可 以 打开 最 近 使 用 过 的 项 目 ,或 者 从 
范例 创建 各 种 页 面 所 需 的 元 素 。 在 “创建 新 项 目 ” 下 ,选择 HTML 选项 , 则 可 以 进入 页 面 
编辑 窗口 ,如 图 5-3 所 示 。 

下 面 将 分 别 讲解 与 网 页 制作 密切 相关 的 各 组 成 部 分 的 作用 。 
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和 时 ED Cr ER EECOEETTIT 
插入 栏 鼎 珊 中 了 器 委 | 国 回国 - 者 - 固 马 加 四- 吕 
i ee EP EE 、 浮动 
四 Ef pe 2 “Gs 司 Esss 面板 组 
i 强 训 
= 型 TP & 5DS 服务 路 
地面 可 
编辑 窗口 
水 平 扩 展 
按钮 
加 纵向 扩展 按钮 。 状态 栏 
标签 
选择 器 oy> "eo res 
属性 关 殉 加 FE 国 Ces jnrv=sss OW| 加 
面板 寺 体 IK 国 大 小 无 国 | ~ Tl ji 雪村 | 
RE [AR | 四 Emal 国 
图 5-3” Dreamweaver 8. 0 页 面 编辑 窗口 
1. 插入 栏 


插入 栏 主要 用 于 在 网 页 中 插入 各 类 网 页 元 素 ,主要 有 “常用 "、“ 布 局 “表单 ”“ 文 
本 ”HTML、“ 应 用 程序 ”“Flash 元 素 ” 和 “收藏 夹 "8 个 选项 卡 。 选 择 某 个 选项 卡 , 即 可 看 
到 相应 的 工具 栏 , 单 击 工具 栏 中 相应 的 工具 选项 即 可 执行 相应 的 命令 。 择 入 栏 的 显示 方 
式 有 两 种 : 制 表 符 显示 方式 和 菜单 显示 方式 ,如 图 5-4 和 图 5-5 所 示 。 其 中 ,“ 常 用 ”插入 
栏 主要 用 于 在 网 页 中 添加 超 链 接 、 图 像 和 日 期 等 常见 元 素 ;“ 布 局 ”插入 栏 主要 用 于 进行 页 
面 布 局 ,可 添加 表格 、 层 、 框 架 以 及 窗口 模式 的 切换 等 操作 ;“ 表 单 ” 插 入 栏 主要 用 于 插入 表 
单 对 象 ,如 文字 字段 , 单 选 按钮 和 复 选 框 等 ;“ 文 本 ”插入 栏 主要 用 于 设置 文本 格式 以 及 添 


加 特殊 字符 。 


Flash 元 素 
收藏 夹 


显示 为 制 表 符 


图 5-4 菜单 显示 方式 的 插入 栏 


国安- 疾 


昌 加 | 图 = 呈 


5-5 制 表 符 显示 方式 的 插入 栏 
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2. 文档 工具 栏 


文档 工具 栏 主要 用 于 切换 编辑 区 视图 模式 ,设置 网 页 标题 ,进行 标记 验证 以 及 在 浏览 
器 中 浏览 网 页 等 ,如 图 5-6 所 示 。 
显示 代码 视图 显示 设计 视图 吊 新 设计 视图 
I 册 EE 加 先是: 民 际 是 广 和 训 史 克 电 | 时] 


显示 代码 视图 文档 标题 在 浏览 器 中 视图 选项 
和 设计 视图 预览/ 调试 


图 5-6 文档 工具 栏 


3. 浮动 面板 组 
浮动 面板 组 是 指 编辑 窗口 右 侧 的 所 有 浮动 面板 的 集合 。 通 常用 于 管理 站 点 和 添加 事 
件 等 操作 。 默 认 情况 下 Dreamweaver 8. 0 打开 4 个 面板 组 ,分 别 是 CSS、 应 用 程序 .标签 


检查 器 和 文件 。 在 各 个 面板 名 称 上 单 击 ,可 以 折 秋 或 展开 面板 。 通 过 单 击 “ 窗 口 " 菜 单 中 
的 相应 命令 可 以 打开 或 关闭 相应 的 面板 。 


4. 状态 栏 


状态 栏 位 于 编辑 窗口 的 下 方 ,其 中 包括 标签 选择 器 、 选 取 工 具 、 手 形 工具 、 缩 放 工 具 、 
“设置 缩放 比率 ”下 拉 列 表 框 “ 窗 口 大 小 ” 栏 和 “文件 大 小 ” 栏 等 项 目 ,如 图 5-7 所 示 。 


标签 选择 器 手 形 工具 缩放 工具 “窗口 大 小 " 栏 
lw He | 
选取 工具 “设置 缩放 比率 "下 拉 列 表 杠 
图 5-7 状态 栏 
5. 属性 面板 


Dreamweaver 8.0 提供 的 属性 面板 可 以 显示 并 修改 当前 选 定 的 页 面 对 象 甚至 是 整 
个 页 面 的 属性 。 执 行 “窗口 *>“ 属 性 ”命令 或 直接 按 Ctrl 十 F3 键 ,就 可 以 显示 或 隐藏 属 
性 面板 。 不同 对 象 其 属性 面板 的 参数 设置 项 目 也 不 同 ,如 图 5-8、 图 5-9 和 图 5-10 


所 示 。 
格式 [元 样式 | 无 加 了 生 要 当量 链 技 | 国 se 8 
字体 默认 字体 天 无 [ | 泣 泣 扯 择 目标 = 


页 而 属性 . 列表 项 目 ...] 


图 5-8 文字 属性 面板 
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本 到 开 宽 Bo0 源 文件 有 TVvator 11iz5.jpd 久 中。 普 换 国 类 @[ 无 
高 [6o0 链接 =] 编辑 四 对 司 © 人 
地 图 垂直 边 距 目标 < 边框 EE 村 
咎 口 口 怪 水 ¥ 边 中 低 解 析 度 源 (O) 瑟 忆 对 六 [人 值 国 


转 表格 Id 行 宽 Eoo ][ 像 素 国 ”填充 对 齐 | 黑人 国 类 @)| 无 图 8 
列 高 伪 素 “ 国 同 到 边框 人 
Ei 背 及 站 ][  ] 。 过关 El [ | 
下 了 到 景 图 像 (8) gD 


图 5-10 表格 属性 面板 


5.2 规划 与 创建 站 点 


5.2.1 规划 站 点 


站 点 就 是 放置 网 站 上 所 有 文件 的 地 方 ,每 一 个 网 站 都 有 自己 的 站 点 ,在 创建 站 点 之 
前 ,要 对 站 点 进行 合理 的 规划 ,这 样 能 使 站 点 中 的 文档 管理 起 来 更 轻松 ,也 能 提高 工作 
效率 。 

在 Dreamweaver 8. 0 中 ,站 点 包括 远程 站 点 和 本 地 站 点 ,简单 地 说 ,就 是 位 于 
Internet 服务 器 上 的 远程 站 点 和 位 于 本 地 计算 机 上 的 本 地 站 点 。 一 般 都 先 在 本 地 计算 机 
上 构建 本 地 站 点 , 当 一 切 都 准备 好 了 ,再 将 站 点 上 传 到 Internet 服务 器 上 。 

一 般 来 说 ,在 规划 站 点 结构 时 ,应 该 遵循 以 下 一 些 规则 。 


1. 文档 分 类 保存 


如 果 是 一 个 复杂 的 站 点 , 它 包含 的 文件 会 很 多 ,而 且 各 类 型 的 文件 内 容 也 不 尽 相 同 ， 
为 了 能 更 合理 地 管理 文件 ,就 要 将 文件 分 门 别 类 地 存放 在 相应 的 文件 夹 中 ,如 果 将 一 切 网 
页 文件 都 存放 在 一 个 文件 夹 中 , 当 站 点 的 规模 越 来 越 大 时 ,管理 起 来 就 会 很 不 容易 。 

用 文件 夹 来 合理 构建 文档 的 结构 时 ,应 该 先 在 本 地 磁盘 创建 一 个 文件 夹 作为 站 点 的 
根 目录 ,然后 在 此 文件 夹 中 再 创建 多 个 子 文件 夹 , 如 page 文件 夹 ,media 文件 夹 .image 文 
件 夹 等 ,将 相应 的 文件 放 在 相应 的 文件 夹 中 。 


2. 合理 地 命名 文件 名 称 


为 了 方便 管理 ,合理 的 文件 名 称 和 文件 夹 名 称 是 很 重要 的 ,好 的 名 称 容易 理解 ,能 够 
清晰 地 表达 出 网 页 内 容 。 另 外 ,在 命名 时 可 采用 与 其 内 容 相同 的 英文 或 拼音 来 命名 ,应 避 
免 使 用 长 文件 名 和 中 文 。 


第 5 章 ”认识 Deaqmwecover 80 (的 ) 


09) 


3. 本 地 站 点 与 远程 站 点 结构 统一 


为 了 方便 维护 和 管理 ,在 设置 本 地 站 点 时 ,应 该 将 本 地 站 点 与 远程 站 点 的 结构 设计 保 
持 一 致 ,将 本 地 站 点 上 的 文件 上 传 到 服务 器 上 时 ,可 以 保证 本 地 站 点 是 远程 站 点 的 完整 备 
份 ,以 避免 出 错 ,也 便于 对 远程 站 点 的 调试 与 管理 。 


5.2.2 创建 本 地 站 点 


可 按 下 列 步 又 建立 本 地 站 点 : 
(1) 启动 Dreamweaver 8. 0 ,执行 “站 点 ”新 建站 点 ”命令 ,弹出 如 图 5-11 所 示 的 对 
话 框 。 在 该 对 话 框 中 设置 站 点 的 名 称 , 如 myweb。 


myweb 的 站 点 定义 为 


算 为 您 的 站 点 起 什么 名 字 ? 


示例 : MySite 


您 的 站 点 的 HTTP 地 址 《URL) 是 什么 ? 
lhrtp:// 
示例 : http://vww. nyfost. con/nySite 


A ma 


BIG-sw > 8 ] 


图 5-11 设置 站 点 名 称 


(2) 单 击 “下 一 步 ?按钮 ,打开 如 图 5-12 所 示 的 对 话 框 。 在 该 对 话 框 中 选择 是 否 使 用 
服务 器 技术 。 如 果 要 建立 的 是 静态 网 页 ,就 选择 * 否 ,我 不 想 使 用 服务 器 技术 ”, 如 果 要 建 
立 动 态 网 页 ,就 选择 “是 ,我 想 使 用 服务 器 技术 ”。 此 处 选择 “ 否 , 我 不 想 使 用 服务 器 技术 ”。 

(3) 单 击 “下 一 步 "按钮 ,打开 如 图 5-13 所 示 的 对 话 框 。 在 文本 框 中 输入 文件 存储 的 
路 径 , 或 单 击 “ 浏 览 ” 按 钮 ,在 弹出 的 对 话 框 中 选择 保存 站 点 文件 的 位 置 。 

(4) 单 击 “ 下 一 步 ” 按 钮 ,打开 如 图 5-14 所 示 的 对 话 框 。 在 弹出 的 对 话 框 中 选择 如 何 
连接 到 远程 服务 器 ,此 处 选择 “无 ”。 

(5) 单 击 “ 下 一 步 "按钮 ,打开 如 图 5-15 所 示 的 对 话 框 ,该 对 话 框 显示 了 前 面 设置 的 
站 点 信息 。 

(6) 单 击 “完成 ?按钮 ,新 建 的 站 点 即 出 现在 “文件 ”面板 上 ,如 图 5-16 所 示 。 
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A -TO 建立 静态 网 
) 是 ， 我 起 使 用 服务 器 技术 。 (Y) 
页 , 选择 此 项 


Cr-#® EF-#w >][ ww |] 人 


图 5-12 选择 是 否 使 用 服务 器 技术 


篇 辑 文件 ， 第 3 部 分 


在 开发 过 程 中 ， 您 打算 如 何 使 用 您 的 文件 ? 


全 编辑 我 的 计算 机 上 的 二 地 副 志 ， 完 成 后 再 上 传 到 服务 器 《推荐 》《(E) 
吕 使 用 本 地 网 络 直 拉 在 服务 只 上 进行 编 亚 GD) 


你 村 把 文件 存 久 在 计算 机 上 的 什么 位 置 ? 
TI 与 


《上 一 步 @) ] [下 一 步 中 > 如 消 “ ][_ 帮助 


图 5-13 定义 站 点 位 置 


5.2.3 管理 站 点 


对 于 一 个 创建 好 的 站 点 ,用户 可 以 随时 更 改 站 点 布局 ,对 站 点 的 属性 进行 编辑 ,例如 
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myweb 的 站 点 定义 为 


对 于 静态 网 站 
一 般 先 在 本 地 您 如 何 这 接 到 运程 腺 务 器 ? 


[CE=#@) 


FS >][ RW |][ 


图 5-14 选择 远程 服务 器 界面 


myweb 的 站 点 定义 为 区 
| 基本 [高 级 | 


站 点 定义 A) /i 


您 的 站 点 包含 以 下 设置 : 


本 地 信息 : 
站 点 名 称 : nyveb 
本 地 根 文件 夹 : E: Nayweb\ 


远程 信息 : 
访问 :我 将 在 以 后 完成 此 设置 。 


测试 服务 器 : 
访问 :我 将 在 以 后 完 或 此 设置 。 


可 以 使 用 ' 高 级 ' 选项 卡 对 你 的 站 点 进行 进一步 配置 。 


EE-#®][ Ww 取消 “][ 帮助 
图 5-15 ”站 点 建立 完成 界面 


复制 站 点 ,删除 站 点 等 。 
1. 编辑 站 点 


具体 操作 步骤 如 下 : 
(1) 执行 “站 点 ?一 “管理 站 点 ”命令 ,打开 ”管理 站 点 ”对话 框 ,如 图 5-17 所 示 。 
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资源 代码 片 电 


加 

后 

外 

外 

局 Tenplates 
轴 1.htn 
国 
全 

全 

加 


1537426. jpg 


add. asp 


button2. svf 
delete, asp 
detail, asp 
Rr | 国 
OE 各 有 [二 
图 5-16 myweb 站 点 图 5-17 “管理 站 点 "对话 框 


(2) 在 对 话 框 上 选择 要 编辑 的 站 点 , 单 击 “ 编 辑 ” 按 钮 ,打开 编辑 站 点 的 对 话 框 ,如 
图 5-18 所 示 。 

(3) 根据 该 对 话 框 编辑 站 点 。 

(4) 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 。 


myweb 的 站 点 定义 为 


分 类 本 地 信息 
蚊 3 点 右 你 人 ): [RE ] 
计生 本 地 根 文件 夹 (E): [E:\ayveb\ ]5 
di 各 回 自动 剧 新 丰 地 文件 列表 (R】 
Contribute 
跨 认 图 像 文件 天 (L): [ ]S 


链 污 相对 于 : 辐 文档 (D) 。 〇 站 点 根 目录 (S) 
HTTP 地 址 (ft): http:// 
此 ; 与 以及 供 
和 
区 分 大 小 写 的 链 捷 : 器 ] 使 用 区 分 大 小 写 的 链接 检查 (0) 
缓存 : 加 启用 缓存 (G) 


i 


约定 取消” ] 帮助 
图 5-18 编辑 站 点 对 话 框 


2. 复制 站 点 


在 Dreamweaver 8.0 中 ,如 果 同 一 个 站 点 需要 两 个 或 更 多 , 则 可 以 进行 复制 站 点 操 
作 ,而 无 需 再 重新 创建 站 点 。 复 制 站 点 的 具体 操作 步骤 如 下 : 

(1) 执行 “站 点 ”>“ 管 理 站 点 "命令 ,打开 “管理 站 点 ”对 话 框 。 

(2) 单 击 “ 复 制 "按钮 , 即 可 复制 一 个 站 点 ,并 在 原名 称 后 显示 “复制 "字样 ,如 图 5-19 
所 示 。 


第 5 章 ”认识 Decnwecver 80 


(3) 单 击 “ 完 成 ”按钮 。 
3. 删除 站 点 


如 果 站 点 已 经 没有 用 处 ,可 以 将 其 删除 ,具体 操作 步骤 如 下 : 

(1) 执行 “站 点 ”一 “管理 站 点 ”命令 ,打开 “管理 站 点 "对话 框 。 

(2) 选择 要 删除 的 站 点 , 单 击 * 删 除 ? 按 钮 ,弹出 一 个 询问 对 话 框 ,如 图 5-20 所 示 。 
(3) 单 击 * 是 ”按钮 即 可 将 选 定 的 站 点 删除 。 

(4) 最 后 单 击 “ 完 成 ”按钮 ,关闭 “管理 站 点 ”对 话 框 。 


Nacromedia Dreammweaver 


作 ， 如 并 


是 人 Z) 否 d 


图 5-19 复制 站 点 图 5-20 删除 站 点 


5.3 网 页 文档 的 基本 操作 


网 页 是 构成 网 站 的 基础 ,在 熟悉 了 Dreamweaver 的 工作 环境 之 后 ,本 节 将 系统 地 学 
习 网 页 文档 的 基本 操作 方法 ,包括 创建 网 页 .打开 网 页 .保存 网 页 以 及 将 网 页 设置 成 首 


5.3.1 创建 网 页 


网 页 的 创建 一 般 有 以 下 3 种 方法 : 

(1) 启动 Dreamweaver 8.0 后 ,窗口 中 会 出 现 一 个 起 始 页 , 单 击 * 创 建新 项 目 " 下 面 的 
选项 即 可 创建 网 页 ,如 图 5-21 所 示 。 

(2) 执行 “文件 ”一 “新建 "菜单 命令 ,弹出 “新 建文 档 ”* 对 话 框 ,如 图 5-22 所 示 。 对 话 
框 提供 了 "常规 ”和 ”模板 ?两 个 选项 卡 ,打开 ”常规 ?选项 卡 ,在 "类别 ? 选 项 区 中 选择 一 种 基 
本 页 类 型 ,然后 在 “基本 页 ”选项 区 中 选择 HTML ,最 后 单 击 “创建 "按钮 即 可 。 

(3) 在 “文件 ?面板 中 新 建文 档 , 如 图 5-23 所 示 。 选 择 一 个 站 点 ,在 站 点 目录 上 单 击 
鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 “新 建文 件 ” 命 令 即 可 。 
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dd DREAMWEAVER: 


创建 新 项 目 
打开.. 国 HTML 口 css 样 式 表 
珊 ColdFusion 口 杠 染 集 
国 PHP 局 nait (Css) 
居 ASP vBseript 加 入 站 页 面 
大 ASPNETC# 忆 页 面 设 i ( 有 辅助 功能 的 》 
同 Javaseript 
国 xML 
怖 XSLT( 整 页 ) 
画 css 
到 Dreamweayver 让 点 - 扩展 
Ds. 图 Dreamweaver Exchange 
"进入 Dreamweaver 快速 指南 。 Adobe® Creative Suite® 4 
重 "了 解 Dreamweaver 文 档 资源 dd 在 印刷 、Yeb、 交 互 式 内 容 、 视 频 和 移动 
。 坦 找 授权 培训 设计 领域 尽情 挥 酒 创意. 


图 5-21 利用 起 始 页 创建 网 页 


HTIL 
XSLT ( 整 页 ) 
XSLT (片断 ) 
库 项 目 

CSS 
JavaScript 


入 门 号 XL 
页面 证 计 〈 有 畏 助 功能 的 》 于 动作 肢 术 


文档 类 型 (DTD) : 
IXHTHL 1.0 Transiticnal 


[红色 


图 5-22 “新 建文 档 ” 对 话 框 


文件 全 2 于 J 


图 5-23 在 站 点 中 新 建文 档 
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5.3.2 打开 网 页 


打开 已 经 存在 的 Dreamweaver 文件 ,通常 也 有 如 下 3 种 方法 : 
(1) 启动 Dreamweaver 8.0, 利 用 起 始 页 中 的 “打开 最 近 项 目 ” 下 面 的 选项 即 可 打开 


最 近 打 开 过 的 文件 ,如 图 5-24 所 示 。 


打开 最 近 项 目 
国 myweb/delete asp 
国 mywebyl htm 
Df 


dd DREAMWEAVER 


创建 新 项 目 


现 HTML 
砚 ColdFusion 


5 Dreamweaver 站 点 
Dys. 


从 范例 创建 
口 css 表 

局 1ER 集 

DD 页 面 设计 (Css) 

局 和 mm 

癌 页 面 it ( 有 辅助 功 能 的 


扩展 
@ Dreamweaver Exchange 


| 


， 查 找 授权 培训 


* 进入 Dreamweaver 快速 指南 。 
， 了 解 Dreamweaver 文 档 资源 


Adobe® Creative Suite® 4 
dd 在 印刷 、Yeb、 交 互 式 内 容 、 视 频 和 移动 
设计 领域 尽情 挥洒 创意 。 


图 5-24 利用 起 始 页 打开 网 页 


(2) 执行 “文件 ”>“ 打 开 ” 菜 单 命令 ,弹出 “打开 ”对 话 框 ,如 图 5-25 所 示 。 选 择 要 打 
开 的 文件 , 单 击 “ 打 开 ” 按 钮 , 即 可 打开 该 文件 。 
(3) 在 “文件 ”面板 中 打开 文档 ,如 图 5-26 所 示 。 在 站 点 目录 上 选择 需要 打开 的 文 


回 myveb 


国 G8 PG 


回 _notes 
Connections 
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BLibrary 
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1 


所 有 文档 x. htn;*.htnl;*. 


ma hral; 国 | 


图 5-25 
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“打开 ”对 话 框 


eT 
新 建文 件 (E) 


新 建文 件 夹 (BR) 


3 打 基 方式 ， 
编辑 (E) » 
选择 GG) 


者 (BY 


图 5-26 在 站 点 中 打开 文档 


档 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “打开 ”命令 即 可 ,也 可 以 通过 直接 双击 文件 
名 来 打开 文档 。 


5.3.3 保存 网 页 


编辑 好 的 网 页 可 以 将 其 保存 起 来 ,以 便 以 后 使 用 。 在 Dreamweaver 8. 0 中 ,通常 采用 
如 下 两 种 方法 来 保存 网 页 文件 。 

(1) 执行 “文件 ”一 “保存 ”( 或 “另存 为 ”) 菜 单 命令 ,弹出 “另存 为 "对话 框 ,如 图 5-27 
所 示 。 在 “文件 名 "文本 框 中 输入 保存 文件 的 名 称 . 单 击 “ 保 存 ” 按 钮 即 可 。 

(2) 在 编辑 窗口 上 方 的 文档 名 称 选项 卡 上 直接 通过 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜 
单 中 选择 “保存 ”或 “另存 为 ”对话 框 进行 保存 文件 ,如 图 5-28 所 示 。 
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Dilash 

. 


delete Untitled-1 \ 
人 detal 名 代码 | 加 拆 妇 | 忆 。 新 建 (0)... 
打开 (@),,， 
关闭 (C) 
全 部 关闭 (E) 
关闭 其 他 文件 (1) 


pn 


保存 全 部 (L) 
ey 回复 至 上 次 的 保存 (R) 
与 过 尖 比 较 人 


[所 有 文档 (4htn;x.htn1;*. shtn;*. shtal: 国 | 


图 5-27 “另存 为 ”对话 框 图 5-28 ”通过 快捷 菜单 进行 保存 


5.3.4 预览 网 页 


为 了 完成 最 佳 的 页 面 设计 ,在 网 页 设计 过 程 中 常常 需要 预览 页 面 效果 ,以 便 进行 必要 
的 修改 调整 。 通 常 有 如 下 两 种 方法 : 

(1) 执行 “文件 ”一 “在 浏览 器 中 预览 ”~~IExplorer 6. 0 菜单 命令 。 

(2) 单 击 “ 文 档 工 具 栏 ”中 的 预览 按钮 区 ,在 弹出 的 下 拉 菜 单 中 选择 “预览 在 
IExplorer 6.0” 命 令 。 

注意 : 网 页 未 执行 保存 而 使 用 浏览 器 预览 时 ,Dreamweaver 8. 0 会 弹出 提示 对 话 框 ， 
询问 是 否 保存 网 页 ,如 图 5-29 所 示 。 因 此 用 户 必 须 先 保 存 网 页 ,才能 通过 浏览 器 预览 网 
页 设计 效果 。 
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图 5-29 保存 提示 对 话 框 


5.4 设置 页 面 属性 


页 面 标题 .背景 图 像 和 颜色 ,文本 和 链接 颜色 ,样式 以 及 边 距 是 每 个 网 页 的 基本 属性 ， 
可 以 通过 “页 面 属性 ”对 话 框 进行 设置 或 更 改 。 打 开 “ 页 面 属性 ”对 话 框 可 通过 如 下 3 种 
方法 : 

(1) 执行 “修改 ”一 “页 面 属性 "菜单 命令 。 

(2) 在 网 页 空白 处 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “页 面 属性 "命令 。 

(3) 单 击 属性 面板 中 的 “页 面 属性 ”按钮 。 

“页 面 属性 ”对 话 框 如 图 5-30 所 示 。 


页 面 属性 


ER 


[浏览 @@.…. ] 


| 像素 ipx) ”~ 右边 距 (R) : 像素 px ~ | 
[ 悍 素 py ~] 下 边 掉 (0): 像素 ba v] 


[ 确定 ] 取消 应 用 (&) 帮助 


图 5-30 “页 面 属性 "对话 框 
通过 该 对 话 框 ,用 户 可 以 设置 外 观 、 链 接 、, 标 题 等 项 的 属性 ,下 面 做 具体 介绍 。 
1. 外 观 
在 “分 类 ”列表 中 选择 “外 观 ” 选 项 ,对 话 框 右 侧 显 示 出 相应 的 属性 ,各 属性 的 作用 


(6 和 ) 网 站 开发 与 设计 教程 


如 下 : 

(1) 页 面 字体 : 设置 在 页 面 中 使 用 的 默认 字体 。 

(2) 大 小 : 设置 在 页 面 中 使 用 的 默认 字体 大 小 。 

(3) 文本 颜色 : 设置 显示 字体 的 默认 颜色 。 

(4) 背景 颜色 : 设置 页 面 使 用 的 背景 颜色 。 

(5) 背景 图 像 : 设置 页 面 的 背景 图 像 。 

注意 : 页 面 的 背景 图 像 和 背景 颜色 不 能 同时 显示 ,如 果 同 时 在 页 面 设置 了 背景 图 像 
和 背景 颜色 , 则 在 浏览 页 面 时 只 显示 背景 图 片 。 

(6) 重复 : 设置 背景 图 像 在 页 面 上 的 显示 方式 ,共有 4 种 方式 : 不 重复 ( 仅 显 示 背 景 
图 像 一 次 ) 、 重 复 ( 横 向 和 纵向 重复 或 平 铺 图 像 ) 、 横 向 重复 (横向 平 铺 图 像 ) 、 纵 向 重复 ( 纵 
向 平 铺 图 像 ) 。 

(7) 左边 距 和 右边 距 : 用 于 设置 左右 页 边 距 的 大 小 。 

(8) 上 边 距 和 下 边 距 : 用 于 设置 上 下 页 边 距 的 大 小 。 


2. 链接 


在 “分 类 ”列表 中 选择 “链接 ”选项 ,对 话 框 右 侧 显示 出 相应 的 属性 ,如 图 5-31 所 示 , 各 
属性 的 作用 如 下 : 

(1) 链接 字体 : 设置 链接 文本 使 用 的 默认 字体 。 

(2) 大 小 : 设置 链接 文本 使 用 的 默认 的 字体 大 小 。 

(3) 链接 颜色 : 设置 应 用 于 链接 文本 的 颜色 。 

(4) 已 访问 链接 : 设置 应 用 于 访问 过 的 链接 的 颜色 。 

(5) 变换 图 像 链接 : 设置 当 鼠 标 位 于 链接 上 时 应 用 的 颜色 。 

(6) 活动 链接 : 设置 当 鼠 标 在 链接 上 单 击 时 应 用 的 颜色 。 

(7) 下 划 线 样式 : 设置 应 用 于 链接 的 下 划 线 样式 。 


页 面 属性 


链接 字体 (L); | ( 同 页 面 字体 ) 

大 小 : 像素 (5z) ~ 
链接 颜色 (L): 厂 -| 变换 图 像 链接 BR): 厂 J] 
已 访问 链接 8) : 活动 链接 (4) : [| 
下 划 线 样式 (): 


[ 确定 ] 取消 应 用 (&) 帮助 


图 5-31 “链接 "选项 
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FAN 


9) 


3. 标题 


在 “分 类 ”列表 中 选择 “标题 "选项 ,对 话 框 右 侧 显 示 出 相应 的 属性 ,如 图 5-32 所 示 ,各 
属性 的 作用 如 下 : 


避 〈 同 页 面 字体 ) 


使 素 Ga) 
像素 mv 
像素 Ga) 

像素 (pt) | [J 
像素 (pr) 

像素 Ga 


图 5-32 “标题 "选项 


(1) 标题 字体 : 指定 在 页 面 中 使 用 的 默认 字体 。 
(2) 标题 1 一 标题 6: 指定 6 种 标题 标记 使 用 的 字体 大 小 和 颜色 。 


4. 标题 /编码 


在 “分 类 ”列表 中 选择 “标题 /编码 ”选项 ,对 话 框 右 侧 显 示 出 相应 的 属性 ,如 图 5-33 所 
示 , 各 属性 的 作用 如 下 、: 

(1) 标题 : 指定 在 “文档 "窗口 和 大 多 数 浏览 器 窗口 的 标题 栏 中 出 现 的 页 面 标题 。 

(2) 文档 类 型 (DTD) : 设置 文档 类 型 定义 。 

(3) 编码 : 指定 文档 中 字符 所 用 的 编码 。 


页 面 属性 


| 开题 文档 
串 xHTIL 1.0 Transitional 国 


串 简 体 中 文 (CBE2312) 国 


口 包括 Unicede 签 各 (SDM) (8) 


文件 文件 夹 : 
站 点 文件 夹 : E: \ayveb\ 


图 5-33 “标题 /编码 ”选项 
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5. 跟踪 图 像 


在 “分 类 ”列表 中 选择 “跟踪 图 像 ” 选 项 ,对 话 框 右 侧 显示 出 相应 的 属性 ,如 图 5-34 所 
示 , 各 属性 的 作用 如 下 : 


图 5-34 “跟踪 图 像 "选项 


(1) 跟踪 图 像 : 指定 在 复制 设计 时 作为 参考 的 图 像 。 该 图 像 只 供 参考 , 当 文 档 在 浏 
览 器 中 显示 时 并 不 出 现 。 

说 明 : 如 果 在 一 个 页 面 同时 设置 了 背景 图 像 背景 颜色 和 跟踪 图 像 , 则 在 编辑 窗口 中 
只 能 看 到 跟踪 图 像 ,但 在 浏览 页 面 时 ,跟踪 图 像 不 显示 。 

(2) 透明 度 : 设置 跟踪 图 像 的 透明 度 。 拖 动 上 面 的 滑 块 设置 图 像 的 透明 程度 。 


5.5 习 题 


一 、 简 答题 


1. Dreamweaver 8.0 的 工作 区 主要 包括 哪些 内 容 ? 
2. 简 述 建立 站 点 的 操作 过 程 。 


二 、 操 作 题 
1. 在 D:N\web 下 建立 一 个 本 地 站 点 ,并 在 该 站 点 中 建立 三 个 文件 夹 ,分 别 是 images、 


pages media。 


2. 隐藏 文档 窗口 中 所 有 的 面板 。 
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网 页 的 排版 布局 


网 页 设计 是 否 美观 ,直接 影响 到 用 户 对 网 站 的 第 一 感觉 。 在 网 页 设计 过 程 中 ,色彩 的 
搭配 ,文字 的 变化 .图片 的 处 理 等 ,这 些 都 是 不 可 忽略 的 因素 ,但 除 此 之 外 ,还 有 一 个 非常 
重要 的 因素 一 一 网 页 的 布局 。 不 同类 型 的 网 站 采用 不 同 的 布局 ,不 但 能 使 网 站 结构 合理 
化 ,也 可 以 使 访问 者 一 看 就 明白 : 这 个 网 站 是 做 什么 的 。 下 面 就 来 学 习 有 关 网 页 布局 的 
相关 知识 和 方法 。 

本 章 学 习 要 点 : 

。 常见 的 网 页 布局 结构 

。 表 格 布局 

。 使 用 层 


6.1 网 页 布局 基础 


网 页 布局 的 效果 直接 影响 到 网 页 设计 的 质量 ,在 完成 网 站 的 规划 后 ,必须 要 事先 做 好 
布局 规划 ,页 面 布局 设计 主要 包括 页 面 版 式 草图 设计 、 优 选 布局 方案 ` 细 化 布局 方案 .选择 
布局 工具 、 确 定 页 面 元 素 等 。 


1. 页 面 版 式 草图 设计 


可 将 新 页 面 视 为 一 张 白 纸 , 尽 可 能 地 发 挥 想象 力 ,将 设想 的 版 式 用 笔画 在 纸 上 形 成 版 
式 草图 。 在 草图 设计 阶段 ,除了 考虑 版 式 布局 方案 外 ,还 应 确定 浏览 页 面 的 大 小 (如 
1024X768 像素 ) 、 页 面 主题 造 型 .页 眉 、 页 脚 、 页 面 对 象 (文本 、 图 像 和 其 他 多 媒体 元 素 ) 的 
大 致 位 置 。 


2. 布局 方案 的 细 化 


在 草图 基础 上 ,添加 上 主要 的 栏目 ,在 细 化 时 ,必须 遵循 突出 重点 ,平衡 协调 的 原则 ， 
将 网 站 标志 、 主 导航 菜单 等 最 重要 的 模块 放 在 最 显眼 .最 突出 的 位 置 ,然后 再 考虑 次 要 栏 


目的 排放 。 
3. 布局 工具 的 选择 


Dreamweaver 8. 0 提供 了 多 种 实用 的 布局 工具 ,可 以 根据 布局 的 复杂 程度 和 具体 要 
求 进行 选择 。 

(1) 表格 布局 : 使 用 表格 , 既 可 以 使 网 页 个 性 化 .艺术 化 ,又 能 使 网 页 的 管理 和 修改 
工作 变 得 更 加 简单 。 目 前 大 多 数 站 点 都 是 用 表格 布局 ,通过 表格 布局 ,可 以 使 对 象 之 间 不 
会 相互 影响 。 

(2) 框架 布局 : 使 用 框架 ,可 以 将 网 页 浏览 器 的 显示 空间 分 割 成 几 个 部 分 ,每 个 部 分 
可 以 独立 显示 不 同 的 网 页 ,又 能 较 好 地 融 为 一 体 。 

(3) 层 布局 : 使 用 层 ,可 以 对 页 面 元 素 进行 定位 ,可 以 将 其 定位 在 页 面 上 的 任意 位 
辕 , 还 可 以 将 层 元 素 进行 堆 释 ,实现 特殊 效果 。 


6.2 常见 的 布局 结构 


网 页 常见 的 布局 结构 类 型 有 “T” 字 型 布局 “ 口 " 字 型 布局 “三 ” 字 型 布局 “ 川 ” 字 型 
布局 海报 型 布局 ,Flash 布局 ,标题 文本 型 布局 ,框架 型 布局 和 综合 型 布局 等 。 


1.“T” 字 型 布局 


“T" 字 型 布局 方式 的 网 页 在 页 面 顶 部 为 “ 横 条 网 站 标志 十 广告 条 ”, 下 方 左面 为 导航 
栏 ,右面 显示 内 容 , 整 体 效 果 类 似 英 文字 母 "T”, 所 以 称 之 为 “T" 字 型 布局 。 这 是 网 页 设计 
中 用 的 最 广泛 的 一 种 布局 方式 ,这 种 布局 的 优点 是 页 面 结构 清晰 , 主 次 分 明 , 是 初学 者 最 
容易 上 手 的 布局 方法 ,缺点 是 中 规 中 和 矩 , 过 于 有 呆板。 


2.“ 口 ? 字 型 布局 


“ 口 " 字 型 布局 方式 的 网 页 在 页 面 的 上 方 和 下 方 各 有 一 个 广告 条 , 左 侧 是 导航 栏 , 右 侧 
放置 “友情 链接 ”等 内 容 , 中 间 是 主要 内 容 的 网 页 ,这 种 布局 的 优点 是 充分 利用 版 面 ,信息 
量 大 ,缺点 是 页 面 拥挤 ,不 够 灵活 。 


3.“ 三 ” 字 型 布局 


“三 ? 字 型 布局 是 一 种 简洁 明快 的 网 页 布局 ,在 国外 用 得 比较 多 ,国内 比较 少见 。 这 种 
布局 的 特 标点 是 在 页 面 上 由 柄 向 两 条 色 块 将 网 页 整体 分 割 为 3 部 分 , 色 块 中 大 多 放血 广告 
条 与 更 新 和 版 权 提示 。 


4. 海报 型 布局 


海报 型 布局 的 网 页 基本 上 出 现在 一 些 网 站 的 首页 ,大 部 分 为 一 些 精美 的 平面 设计 结 
一 些小 的 动画 , 放 上 几 个 简单 的 链接 或 者 仅 是 一 个 “进入 ”的 链接 甚至 直接 在 首页 的 图 
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片上 做 链接 而 没有 任何 提示 。 这 种 类 型 大 部 分 出 现在 企业 网 站 和 个 人 主页 ,如 果 说 处 理 
得 好 ,会 给 人 带 来 赏心悦目 的 感觉 。 


5. 标题 文本 型 布局 


标题 文本 型 布局 是 指 页 面 内 容 以 文本 为 主 ,这 种 类 型 页 面 最 上 面 往往 是 标题 或 类 似 
的 一 些 东西 ,下 面 是 正文 ,比如 一 些 文章 页 面 或 注册 页 面 等 就 是 这 一 类 。 


6. 框架 型 布局 


采用 框架 布局 结构 ,常见 的 有 左右 框架 型 、 上 下 框架 型 和 综合 框架 型 。 由 于 兼容 性 和 
美观 等 因素 ,这 种 布局 目前 专业 设计 人 员 采 用 的 已 不 多 ,不 过 在 一 些 大 型 论坛 上 还 是 比较 
受 青睐 的 ,有 些 企业 网 站 也 有 应 用 。 


7. 综合 型 布局 
综合 型 布局 是 一 种 较为 复杂 的 布局 ,是 上 述 几 种 布局 的 结合 与 变化 。 


6.3 表格 布局 


表格 是 一 种 简明 扼要 而 内 容 丰 富 的 组 织 和 显示 信息 的 方式 。 在 文档 处 理 中 占有 十 分 
重要 的 位 置 ,使 用 Dreamweaver 8.0 制作 网 页 时 , 既 可 以 使 用 表格 在 页 面 上 显示 表格 式 数 
据 , 也 可 以 使 用 表格 进行 文本 和 图 形 的 布局 。 


6.3.1 创建 表格 


在 网 页 通过 插入 表格 可 对 网 页 中 的 元 素 进行 精确 的 定位 ,从 而 达到 页 面 美 观 的 效果 。 
搬入 表格 分 为 插入 普通 表格 和 插入 徐 套 表格 两 种 。 


1. 插入 普通 表格 


普通 表格 即 传统 意义 上 的 表格 ,通常 用 来 显示 
信息 。 在 Dreamweaver 8. 0 中 插入 表格 的 方法 是 : 
执行 “插入 ”一 “表格 "命令, 打开“ 表格” 对话 框 ,如 
图 6-1 所 示 。 其 中 各 选项 的 参数 含义 为 : 

(1) 行 数 : 用 于 设置 表格 的 行 数 。 

(2) 列 数 : 用 于 设置 表格 的 列 数 。 

(3) 表格 宽度 : 用 于 设置 表格 的 宽度 ,有 两 种 
度量 单位 , 即 像素 和 百分比 。 一 般 外 层 表格 单位 用 
像素 , 嵌 套 表格 用 百分比 。 

(4) 边框 粗细 : 用 于 设置 单元 格 边框 线 的 宽 图 6-1 插入 表格 对 话 框 
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度 , 当 设置 为 0 时 ,表明 无 边框 。 

(5) 单元 格 边 距 : 用 于 设置 单元 格 边框 和 单元 格 内 容 之 间 相 距 的 距离 。 

(6) 单元 格 间距 : 用 于 设置 相 邻 的 表格 单元 格 之 间 相距 像素 值 。 

根据 各 选项 的 作用 对 插入 的 表格 进行 属性 设置 ,设置 好 表格 后 , 单 击 “ 确 定 ” 按 钮 即 可 
插入 表格 。 


2. 插入 获 套 表格 


嵌 套 表格 是 指 在 表格 的 某 个 单元 格 中 再 插入 一 个 表格 ,其 宽度 受 所 在 单元 格 的 宽度 
限制 。 在 制作 页 面 较为 复杂 的 网 页 时 ,可 以 使 用 嵌 套 表格 来 对 其 进行 布局 。 在 
Dreamweaver 8. 0 中 插入 嵌 套 表格 的 方法 同 插入 普通 表格 的 方法 相同 。 


6.3.2 编辑 表格 


表格 创建 好 后 ,有 时 并 不 完全 符合 设计 者 的 要 求 , 这 时 可 以 通过 对 表格 进行 编辑 , 达 
到 更 理想 的 效果 。 在 Dreamweaver 8. 0 中 编辑 表格 主要 包括 选择 表格 元 素 .插入 和 删除 
行 或 列 . 拆 分 与 合并 单元 格 .添加 表格 内 容 等 。 


1. 选择 表格 元 素 


选择 表格 元 素 包括 选择 整个 表格 .选择 行 或 列 和 选择 单元 格 。 其 操作 方法 分 别 为 : 

1) 选择 整个 表格 

如 果 要 选择 整个 表格 对 象 , 可 执行 下 列 操 作 之 一 。 

(1) 将 鼠标 光标 移 到 表格 边框 线 上 , 当 边 框 线 变 为 红色 且 鼠 标 光 标 变 为 和 形状 时 , 单 
击 鼠 标 左 键 即 可 将 其 选中 。 

(2) 单 击 表格 单元 格 ,然后 执行 “修改 ”一 “表格 ”>“ 选 择 表格 ”菜单 命令 。 

(3) 单 击 表格 单元 格 ,然后 在 状态 栏 中 的 标签 检查 器 中 选择 二 table 志 标记 ,如 图 6-2 
所 示 。 
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图 6-2 单 击 二 table> 标 记 选 中 整个 表格 
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选 定 的 表格 下 边缘 和 左边 缘 会 出 现 控制 点 。 

2) 选择 表格 中 的 行 或 列 

若 要 选择 整 行 ,可 执行 下 列 操作 之 一 。 

(1) 将 鼠标 光标 移 到 需要 选择 行 的 左 侧 , 当 鼠 标 光 标 变 为 “省 ?形状 且 该 行 的 边框 线 
变 为 红色 时 , 单 击 鼠 标 左 键 即 可 选中 该 行 。 

(2) 在 表格 要 选中 行 的 第 一 个 单元 格 上 按 下 鼠标 ,水 平 拖 动 到 此 行 的 最 后 一 个 单元 
格 上 , 松 开 鼠标 即 可 。 

(3) 将 鼠标 定位 在 需要 选取 的 行 或 列 中 任意 一 个 单元 格 中 ,然后 在 状态 栏 中 的 标签 
检查 器 中 选择 一 tr 之 标记 ,如 图 6-3 所 示 。 


mg (DY 


图 6-3 单 击 一 tr> 标 记 选 中 整 行 


若 要 选中 整 列 ,可 以 执行 下 列 操作 之 一 。 

(1) 将 鼠标 光标 移 到 所 要 选择 列 的 上 侧 , 当 鼠标 光标 变 为 ”形状 且 该 列 的 边框 线 
变 为 红色 时 , 单 击 鼠标 左 键 即 可 选中 该 列 。 

(2) 在 表格 要 选中 列 的 最 上 面 的 单元 格 上 按 下 鼠标 ,垂直 拖 动 到 最 下 面 的 单元 格 , 松 
开 鼠 标 即 可 。 

3) 选择 单个 单元 格 

如 果 要 选择 单个 单元 格 ,可 以 执行 下 列 操作 之 一 。 

(1) 单 击 要 选择 的 单元 格 , 然 后 执行 “编辑 ”>“ 全 选 ” 菜 单 命令 。 

(2) 单 击 要 选择 的 单元 格 ,然后 在 标签 检查 器 中 选择 <td 二 标记 ,如 图 6-4 所 示 。 

4) 选择 多 个 连续 的 单元 格 

如 果 要 选择 多 个 连续 的 单元 格 , 可 以 执行 下 列 操作 之 一 。 

(1) 从 一 个 单元 格 拖 到 另 一 个 单元 格 。 

(2) 选中 一 个 单元 格 ,然后 按 住 Shift 键 单 击 另 一 个 单元 格 。 

5) 选择 多 个 不 连续 的 单元 格 

如 果 要 选择 多 个 不 连续 的 单元 格 , 可 以 在 按 住 Ctrl 键 的 同时 单 击 要 选择 的 单元 格 。 
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图 6-4 单 击 二 td 之 标记 选中 单元 格 


2. 插入 行 或 列 


用 户 可 以 执行 “修改 ”一 “表格 ”菜单 中 的 子 命令 来 添加 行 和 列 。 可 执行 下 列 操作 
之 一。 
(1) 若 要 在 当前 单元 格 的 上 面 插 入 一 行 ,可 以 执行 “修改 ”一 “表格 ”一 “插入 行 "命令 。 
(2) 若 要 在 当前 单元 格 的 左边 插入 一 列 ， 
可 以 执行 “修改 ”>“ 表 格 ”>“ 插 入 列 ” 命 令 。 


插入 行 或 列 


插入 : 四季 全 )] 
(3) 若 要 一 次 插入 多 行 或 多 列 , 或 者 在 当 ee 
前 单元 格 的 下 面 插入 行 或 在 其 右边 插入 列 , 则 二 


可 以 执行 “修改 ”>“ 表 格 ” 一 “插入 行 或 列 ” 命 Se 
令 , 在 弹出 的 “插入 行 或 列 " 对 话 框 中 设置 插入 图 6-5 “插入 行 或 列 ”对 话 框 
的 行 ( 列 ) 数 和 位 置 等 参数 即 可 ,如 图 6-5 所 示 。 


3. 删除 行 或 列 


在 Dreamweaver 8.0 中 ,删除 行 或 列 的 方法 非常 简单 ,主要 有 如 下 两 种 ， 

(1) 选 定 要 删除 的 行 或 列 ,执行 “编辑 ">" 清除” 菜单 命 令 或 按 Delete 键 。 

(2) 在 要 删除 的 行 或 列 上 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “表格 ”删除 
行 ”(“ 删 除 列 >) 命令 完成 删除 。 

注意 : 删除 行 或 列 时 ,如 果 选 择 的 不 是 整 行 或 整 列 的 单元 格 ,那么 执行 “编辑 ">“ 清 
除 ” 命 令 或 按 Delete 键 ,只 会 删除 单元 格 中 的 内 容 , 而 不 会 删除 单元 格 。 


4. 单元 格 的 合并 及 拆 分 

1) 合并 单元 格 

合并 单元 格 是 指 将 两 个 或 多 个 单元 格 组 合成 一 个 单元 格 。 合 并 单元 格 的 操作 只 能 对 
相 邻 的 多 个 单元 格 进行 合并 。 其 方法 有 如 下 三 种 : 
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(1) 选择 两 个 或 多 个 相 邻 的 单元 格 区 域 ,然后 单 击 * 属 性 ?面板 左下 角 的 回 按 钮 即 可 。 

(2) 选择 两 个 或 多 个 相 邻 的 单元 格 区 域 ,然后 执行 “修改 ”一 “表格 ”合并 单元 格 ” 
菜单 命令 。 

(3) 在 选中 的 单元 格 区域 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 执行 “表格 ”>“ 合 并 
单元 格 ” 命 令 。 

2) 拆 分 单元 格 

拆 分 单元 格 与 合并 单元 格 相 反 , 它 是 将 一 个 单元 格 拆 分 为 多 个 单元 格 的 操作 。 其 方 
法 有 如 下 三 种 : 

(1) 将 鼠标 光标 定位 在 需要 拆 分 的 单元 格 位 置 , 单 击 * 属 性 ?面板 左下 角 的 应 按钮 。 

(2) 单 击 单元 格 ,然后 执行 “修改 ”一 “表格 ”>“ 拆 分 单元 格 " 命 令 。 

(3) 在 单元 格 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 执行 “表格 ”一 “ 拆 分 单元 格 ” 
命令 。 
执行 上 面 的 操作 之 后 ,会 弹出 “ 拆 分 单元 格 ” 对 话 框 ,如 图 6-6 所 示 。 在 该 对 话 框 中 ， 
“把 单元 格 拆 分 成 ”选项 是 用 来 设置 将 单元 格 拆 分 成 行 还 是 列 ;“ 行 数 ” 或 “ 列 数 "文本 框 是 
用 来 设置 将 指定 单元 格 拆 分 后 的 行 数 或 列 数 。 


5. 调整 表格 大 小 


通常 插入 的 表格 并 不 能 总 是 符合 设计 要 求 , 这 时 就 可 以 通过 调整 表格 的 行 高 和 列 高 
来 适应 页 面 中 的 内 容 。 要 调整 表格 大 小 ,首先 要 选中 表格 ,这 时 表格 上 会 出 现 3 个 控制 
点 ,并 会 显示 表格 的 宽度 信息 ,如 图 6-7 所 示 。 用 户 可 以 通过 下 列 方法 调整 表格 的 大 小 。 


拆 分 单元 格 
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图 6-6 “ 拆 分 单元 格 "对 话 框 图 6-7 调整 表格 大 小 的 控制 点 


(1) 若 要 调整 表格 的 列 宽 , 可 以 拖 动 右边 的 选择 控制 点 。 

(2) 若 要 调整 表格 的 行 高 ,可 以 拖 动 底部 的 选择 控制 点 。 

(3) 若 要 同时 调整 表格 的 宽度 和 高 度 , 可 以 拖 动 右 下 角 的 选择 控制 点 。 

调整 表格 大 小 ,还 可 以 在 表格 属性 面板 的 “ 宽 " 和 “高 文本 框 中 ,直接 输入 数值 来 精确 
调整 。 

6. 为 表格 添加 内 容 


创建 好 表格 后 ,就 可 以 向 表格 中 添加 内 容 了 。 通 常情 况 下 ,表格 中 可 插入 文本 和 图 
像 ,但 也 可 以 插入 一 些 其 他 元 素 , 如 Flash 和 表单 元 素 等 。 其 添加 方法 很 简单 ,只 需 将 鼠 
标 光标 定位 在 需要 添加 对 象 的 单元 格 中 ,然后 输入 文本 或 执行 “插入 ”一 “图 像 ” 命 令 进行 
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图 像 的 插入 。 
7. 表格 数据 的 导入 和 导出 


在 Dreamweaver 8.0 中 ,可 以 将 其 他 应 用 软件 制作 完成 后 的 表格 数据 导入 ,相对 的 ， 
也 可 以 将 HTML 文档 中 的 数据 导出 ,以 供 其 他 应 用 程序 使 用 。 

1) 导入 表格 数据 

如 果 要 导入 表格 式 数 据 ,可 以 执行 “文件 ”>“ 导 入 ”一 “表格 式 数据 ”命令 ,或 者 执行 
“插入 ”一 “表格 对 象 >“ 导 入 表格 式 数据 ”命令 ,还 可 以 在 “插入 ”工具 栏 的 “布局 ”选项 卡 
中 , 单 击 表格 数据 按钮 圆 ,都 可 打开 如 图 6-8 所 示 的 “导入 表格 式 数据 ?对 话 框 。 其 中 各 项 
含义 如 下 所 述 。 
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图 6-8 “导入 表格 式 数据 "对 话 框 


(1) 数据 文件 : 指定 需要 插入 的 数据 文件 。 单 击 “ 浏 览 ” 按 钮 可 以 在 打开 的 对 话 框 中 
选择 要 导入 的 文件 。 

(2) 定 界 符 : 选择 定 界 符 , 使 之 与 导入 的 数据 文件 格式 相 匹 配 。 

(3) 表格 宽度 : 在 该 选项 组 中 ,可 以 调整 表格 的 宽度 ,其 中 有 两 个 单 选 按 钮 :“ 匹 配 内 
容 ”, 选 中 该 按钮 ,可 以 创建 一 个 根据 最 长 文件 进行 调整 的 表格 .“ 设 置 为 ,选中 该 按钮 ， 
可 以 在 后 面 的 文本 框 中 输入 表格 宽度 以 及 设置 其 单位 。 

(4) 单元 格 边 距 : 在 该 文本 框 中 ,以 像素 为 单位 指定 表格 单元 格 中 的 内 容 和 边框 之 
间 的 距离 。 

(5) 单元 格 间距 : 在 该 文本 框 中 ,以 像素 为 单位 指定 单元 格 之 间 的 间隔 。 

(6) 格式 化 首 行 : 在 该 选项 中 设置 首 行 标题 的 格式 。 

(7) 边框 : 在 该 文本 框 中 ,以 像素 为 单位 指定 表格 边框 的 宽度 。 当 输入 0 时 ,在 浏览 
器 中 不 显示 边框 。 

2) 导出 表格 数据 

如 果 要 将 表格 数据 导出 为 文本 文件 ,首先 将 光标 置 于 表格 的 任意 单元 格 中 ,然后 执行 
“文件 ”一 导出 ”表格 ”命令 ,打开 “导出 表格 "对 话 
框 ,如 图 6-9 所 示 。 在 该 对 话 框 的 “ 定 界 符 ” 列 表 框 
中 ,根据 需要 选择 一 种 分 隔 符 ,接着 在 “换行 符 ” 列 表 :unaws 国 
框 中 ,选择 将 要 导出 文件 的 操作 系统 ,然后 单 击 “ 导 
出 ”按钮 , 即 可 打开 如 图 6-10 所 示 的 “表格 导出 为 ?对 图 6-9 “导出 表格 ”对话 框 
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话 框 。 在 该 对 话 框 中 ,为 导出 的 表格 确定 目标 位 置 以 及 文件 名 后 , 单 击 “ 保 存 ” 按 钮 即 可 得 


到 数据 文本 文件 。 
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图 6-10 “表格 导出 为 "对话 框 


8. 表格 排序 


在 Dreamweaver 8.0 中 ,用 户 可 以 使 表格 中 的 内 容 按 字母 和 数字 进行 排序 ,其 具体 方 


法 为 : 选中 表格 ,执行 “命令 ”一 “排序 表格 ” 
命令 ,弹出 “排序 表格 ”对 话 框 ,如 图 6-11 所 
示 。 该 对 话 框 中 各 项 含义 如 下 所 述 。 

(1) 排序 按 : 单 击 该 选项 可 以 选择 按 哪 
一 列 进行 排序 。 

(2) 顺序 : 确定 是 按 字母 还 是 按 数字 顺 
序 以 及 是 以 升序 还 是 降序 进行 排序 。 

(3) 再 按 : 确定 在 不 同 列 上 第 二 种 排序 
方法 的 排序 顺序 。 在 其 后 的 下 拉 列 表 中 指 
定 应 用 第 二 种 排序 方法 的 列 , 并 在 “顺序 ”的 


下 拉 列 表 中 指定 第 二 种 排序 方法 的 排序 顺序 。 
(4) 排序 包含 第 一 行 : 指定 表格 的 第 一 行 是 否 包括 在 排序 中 。 如 果 第 一 行 是 不 应 该 


移动 的 标题 , 则 不 选择 该 项 。 


一 国 
:| 按 字母 顺序 。 国 | | 升序 


国 | 疡 


: 口 排序 包含 第 一 行 

排序 标题 行 

口 排序 脚注 行 

口 完成 排序 后 所 有 行 颜色 保持 不 变 


图 6-11 “排序 表格 "对话 框 


(5) 排序 标题 行 : 选择 该 选项 ,指定 对 整个 表格 (包括 标题 行 ) 用 相同 排序 条 件 进行 


排序 。 


(6) 排序 脚注 行 : 选择 该 选项 ,指定 对 整个 表格 (包括 脚注 行 ) 用 相同 排序 条 件 进行 


排序 。 


(7) 完成 排序 后 所 有 行 颜色 保持 不 变 : 指定 排序 后 表格 行 的 颜色 应 保持 与 相同 内 容 
的 关联 。 例 如 表格 行使 用 两 种 交替 的 颜色 , 则 不 要 选中 此 选项 ,以 确保 排序 后 的 表格 仍 具 
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有 交替 颜色 的 行 。 
6.3.3 格式 化 表格 


为 使 创建 后 的 表格 更 具 特 色 ,可 以 通过 设置 表格 的 属性 来 格式 化 表格 。 对 表格 属性 
的 设置 可 以 通过 表格 “属性 ”面板 来 完成 ,还 可 以 对 单元 格 进行 设置 ,以 满足 不 同 的 网 页 设 
计 需 要 。 而 通过 使 用 预先 设计 好 的 格式 化 表格 , 则 可 以 省 去 许多 烦琐 的 设置 表格 步 又, 提 
高 工作 效率 。 本 节 将 详细 介绍 这 些 内 容 。 


1. 设置 表格 属性 


要 设置 表格 的 属性 ,必须 首先 选中 该 表格 ,然后 执行 “窗口 >“ 属性 ”命令 ,打开 表格 
的 “属性 ”面板 ,如 图 6-12 所 示 。 通 过 设置 属性 来 更 改 表 格 的 格式 设置 。 


国 ] 表格 Id 和 BE 帘 [zoo [做 来 国 ” 赴 充 |b 对 齐 | 默认 国 
国 列 B ”] ”高 | jl 多 来 国 间距 边 柜上 
CE 背景 蜗 色 厂 -|[ ] 边民 斋 色 [ | | _ 
BF 


1. 19 口 
图 6-12 表格 “属性 ”面板 


其 中 各 选项 的 功能 如 下 所 述 。 

(1) 表格 Id: 用 于 设置 表格 的 名 称 。 

(2) 行 和 列 : 用 于 设置 表格 的 行 数 和 列 数 。 

(3) 宽 和 高 : 用 于 设置 表格 的 宽度 和 高 度 , 以 像素 为 单位 或 按 占 浏览 器 窗口 宽度 的 
百分比 进行 计算 。 

(4) 填充 : 用 于 设置 单元 格 内 容 和 单元 格 边框 之 间 的 像素 数 。 

(5) 间距 : 用 于 设置 相 邻 单元 格 之 间 的 像素 数 。 

(6) 对 齐 : 用 于 确定 表格 相对 于 同一 段落 中 其 他 元 素 (例如 文本 或 图 像 ) 的 显示 
位 置 。 

(7) 边框 : 用 于 设置 表格 边框 的 宽度 ,单位 为 像素 。 

(8) 类 : 可 以 在 该 下 拉 列 表 框 中 重 命名 表格 或 者 管理 表格 样式 。 

(9) 背景 颜色 : 用 于 设置 表格 的 背景 颜色 。 

(10) 边框 颜色 : 用 于 设置 表格 边框 的 颜色 。 

(11) 背景 图 像 : 用 于 设置 表格 的 背景 图 像 。 

(12) 清除 列 宽 品 和 清除 行 高 下: 用 于 从 表格 中 删除 所 有 显 式 指 定 的 行 高 和 列 宽 值 。 

(13) 将 表格 宽度 转换 成 像素 铝 和 将 表格 高 度 转换 成 像素 又 : 用 于 将 表格 当前 宽度 
或 高 度 单位 转换 为 像素 单位 。 

(14) 将 表格 宽度 转换 成 百分比 同和 将 表格 高 度 转换 成 百分比 于 : 用 于 将 表格 当前 
宽度 或 高 度 单位 转换 为 以 按 占 文档 窗口 的 百分比 为 单位 。 
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2. 设置 单元 格 . 行 和 列 的 属性 


在 表格 “属性 ?面板 打开 状态 下 ,如 果 选 择 表 格 中 的 单元 格 、 行 或 列 , 在 "属性 ?面板 中 
则 可 以 设置 选中 的 单元 格 、 行 或 列 的 属性 ,在 该 属性 ?面板 中 包含 了 两 部 分 内 容 , 如 
图 6-13 所 示 。 上 半 部 分 用 于 设置 单元 格 、. 行 或 列 中 文本 的 属性 ,下 半 部 分 用 于 设置 单元 
格 `. 行 或 列 的 属性 。 


彬 式 [区 国 条 式 [元 国 [Ces jn zsas S| 国 9E9 
字体 | 默认 字体 居 列 无 | 国 王 湛 绍 地 目标 ~ 
国 记 5 水 平 | 默认 宽 不 换行 口 。 背景 C3 

加 于 生 直 办 人 国 高 标题 品 背景 颜色 边框 上 

格式 无 国 ” 梯 式 无 国 忆 Ej 了 rE 4 国 % 59 
字体 | 默认 字体 天 网 元 [ev 汪 注 茹 妆 目标 vw 
得 孙 下 了 人 国 ” ”高 不 换行 门 。 ”背景 Ee] 

中 北 垂直 | 由 认 国 高 标题 口 背景 颜色 边 柜 厂 | 加 

格式 | 无 样式 | 无 国 [ecss ]axr 生 主 当 日 外 上 国 9E9 
字体 | 默认 字体 国 决 术 无 ” 国 | ~ | 汪 折 二 站 目标 ~ 
EE 列 来 平 | 默认 宽 不 换行 门 。 背景 | S90 

口 下 邓 直 [内 国 ”高 标题 品 背景 关 色 边框 站 时 


图 6-13 单元 格 , 行 和 列 “ 属 性 ?面板 


其 中 各 选项 的 功能 如 下 所 述 

(1) 合并 单元 格 按钮 回 : 将 所 选 的 单元 格 、 行 或 列 合并 为 一 个 单元 格 。 只 有 选中 连 
续 的 单元 格 时 才 可 以 合并 。 

(2) 拆 分 单元 格 按钮 功 : 将 一 个 单元 格 分 成 两 个 或 更 多 单元 格 。 一 次 只 能 拆 分 一 个 
单元 格 ,当选 择 的 单元 格 多 于 一 个 时 ,该 按钮 不 可 用 。 

(3) 水 平 : 用 于 指定 单元 格 , 行 或 列 内 容 的 水 平 对 齐 方式 。 

(4) 垂直 : 用 于 指定 单元 格 , 行 或 列 内 容 的 垂直 对 齐 方式 。 

(5) 宽 和 高 : 用 于 设置 单元 格 的 宽度 和 高 度 。 

(6) 不 换行 : 选中 该 复 选 框 ,可 以 防止 换行 ,从 而 使 单元 格 中 的 所 有 文本 都 在 一 
行 准 。 

(7) 标题 : 选中 该 复 选 框 ,可 以 将 所 选 的 单元 格格 式 设置 为 表格 标题 单元 格 。 默 认 
情况 下 ,表格 标题 单元 格 的 内 容 为 粗 体 并 且 居中 。 

(8) 背景 : 为 单元 格 . 行 或 列 添加 背景 图 像 。 

(9) 背景 颜色 : 为 单元 格 . 行 或 列 设置 背景 颜色 。 

(10) 边框 : 为 单元 格 、 行 或 列 设置 边框 颜色 。 


3. 应 用 预 设 表格 样式 


在 Dreamweaver 8.0 中 已 经 预先 设计 了 多 种 表格 样式 ,并 且 可 以 将 这 些 预 先 设计 格 
式 快速 应 用 于 表格 。 要 使 用 预先 设计 的 表格 ,首先 选中 要 格式 化 的 表格 ,然后 执行 “命令 ” 
一 “格式 化 表格 ”命令 ,弹出 “格式 化 表格 ?对 话 框 , 如 图 6-14 所 示 , 在 该 对 话 框 中 可 以 根据 
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个 人 喜好 进行 自 定义 设计 。 


口 将 所 有 属性 套用 至 TD 标注 而 不 是 TR 标签 


图 6-14 “格式 化 表格 "对 话 框 


(1) 行 颜色 : 用 于 设置 第 一 行 之 外 的 行 的 颜色 。 

(2) 第 一 行 : 用 于 设置 表格 第 一 行 的 对 齐 方式 ,文字 样式 ,背景 色 及 文本 颜色 。 
(3) 最 左 列 : 用 于 设置 表格 最 左 列 的 对 齐 方式 和 文字 样式 。 

(4) 表格 边框 : 设置 表格 边框 的 宽度 。 


6.4 使 用 布局 表格 


为 了 简化 使 用 表格 进行 页 面 布局 的 过 程 ,Dreamweaver 8.0 提供 了 布局 视图 模式 。 
在 布局 视图 模式 中 ,用 户 可 以 在 页 面 上 方便 地 绘制 布局 单元 格 , 然 后 将 这 些 单元 格 移动 到 
所 需 的 位 置 ,用 户 还 可 以 创建 固定 宽度 的 布局 和 自动 伸展 为 整个 浏览 器 窗口 宽度 的 布局 。 


6.4.1 布局 视图 


Dreamweaver 8.0 中 有 两 种 视图 方式 : 标准 视图 和 布局 视图 。 默 认 情 况 下 打开 的 是 
标准 视图 。 如 果 要 使 用 布局 视图 模式 进行 页 面 布局 ,首先 要 切换 到 布局 视图 ,方法 有 : 
(1) 执行 查看 ”一 “表格 模式 ”一 “布局 视图 命令。 
(2) 单 击 “插入 ?工具 栏 上 的 “布局 ? 子 工具 栏 上 的 “布局 ”按钮 ,如 图 6-15 所 示 。 
图 加 组 [天生 [ 英 必 寺 市 尿 ) 馈 央 | 昔 受训 中 国 - 园 
图 6-15 布局 插入 栏 


6.4.2 绘制 布局 表格 和 单元 格 


绘制 布局 表格 的 方法 很 简单 ,其 具体 操作 步骤 如 下 : 
第 6 章 网 页 的 排版 布局 (69) 


(1) 首先 将 编辑 窗口 切换 到 布局 模式 。 

(2) 在 “布局 ?插入 栏 中 单 击 * 布 局 表格 ?按钮 镶 , 将 鼠标 移 到 编辑 窗口 中 。 

(3) 当 指针 变 为 “十 ?形状 时 , 按 住 鼠 标 左 键 在 编辑 窗口 中 进行 拖 动 , 当 绘制 出 大 
小 合适 的 区 域 时 ,释放 鼠标 即 可 。 这 时 ,页 面 中 将 出 现 带 有 绿色 边框 的 表格 ,如 图 6-16 
所 示 。 


图 6-16 绘制 布局 表格 


说 明 : 当 在 一 个 空 文档 中 绘制 布局 表格 时 ,表格 总 能 自动 捕捉 页 面 窗口 的 左上 角 , 而 
且 不 能 直接 在 布局 表格 的 旁边 插入 其 他 布局 表格 ,只 能 在 布局 表格 内 或 表格 的 下 方 添加 
其 他 布局 表格 。 

如 果 在 一 个 页 面 中 只 是 简单 地 绘制 出 布局 表格 ,而 没有 绘制 布局 单元 格 ,那么 布局 表 
格 的 表面 将 是 灰色 的 ,此 时 不 能 向 布局 表格 内 插入 任何 内 容 , 所 以 必须 在 每 个 布局 表格 里 
绘制 布局 单元 格 。 其 具体 操作 方法 如 下 : 

(1) 单 击 选择 绘制 布局 单元 格 按钮 加 . 

(2) 将 鼠标 移 到 编辑 窗口 中 , 当 指 针 变 为 “十 "形状 后 , 按 住 鼠 标 左 键 在 布局 表格 中 进 
行 拖 放 。 

(3) 当 绘 制 出 合适 大 小 的 单元 格 后 释放 鼠标 即 可 。 这 时 ,页 面 中 将 出 现 蓝 色 边框 的 
单元 格 ,如 图 6-17 所 示 。 

说 明 : 在 页 面 中 绘制 的 单元 格 ,不 能 脱离 表格 而 独立 存在 。 如 果 在 页 面 的 空白 区 域 
中 直接 绘制 单元 格 , 将 会 自动 产生 一 个 表格 作为 该 单元 格 的 容器 ,并 且 创 建 的 单元 格 不 能 
相互 交叉 。 

小 技巧 : 如 果 想 创建 多 个 布局 表格 而 又 不 想 每 次 都 单 击 布局 表格 按钮 ,可 以 在 单 击 
布局 表格 按钮 后 ,在 绘制 表格 时 按 住 Ctrl 键 不 放 这 样 就 可 以 连续 绘制 布局 表格 了 。 
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人 到 | 全 拆 到 | 国 设计 ] ”标题 ; 玩 标题 文档 喇 归 届 和 |C 量 区 
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2 mm- a 
ET 
odv> <table> <tr>[Ctd)] "ohoo% -so 可 | 


图 6-17 绘制 布局 单元 格 


6.4.3 调整 布局 表格 和 单元 格 


网 页 中 布局 表格 和 布局 单元 格 可 以 移动 并 能 改变 大 小 ,这 使 得 调整 布局 的 工作 大 大 
简便 了 。 在 移动 布局 表格 和 布局 单元 格 以 及 调整 大 小 时 ,使 用 Dreamweaver 8. 0 提供 的 
网 格 线 作为 辅助 向 导 会 方便 一 些 , 显 示 网 格 线 的 方法 是 执行 “查看 ”~ 网 格 ”-~”“ 显 示 网 
格 ” 命 令 ,显示 网 格 后 效果 如 图 6-18 所 示 。 


遇 Untitled-1 (XHTHL) 


图 6-18 显示 网 格 
1. 移动 布局 表格 


只 有 嵌 套 表格 才 可 以 移动 ,移动 布局 表格 的 方法 是 : 选中 表格 ,然后 拖 动 表格 到 合适 
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的 位 置 即 可 ;如 果 同 时 按 住 Shift 键 ,每 次 可 以 移动 10 个 像素 的 距离 。 
注意 : 如 果 所 要 移动 的 布局 表格 旁边 有 其 他 布局 表格 , 且 没 有 可 移动 的 空间 ,就 无 法 
进行 表格 的 移动 操作 ,表格 将 自动 返回 到 原来 位 置 。 


2. 调整 布局 表格 大 小 


调整 布局 表格 尺寸 的 方法 是 : 选中 表格 ,表格 将 出 现 8 个 控制 柄 ,如 图 6-19 所 示 , 然 
后 拖 动 控制 柄 到 合适 的 位 置 即 可 。 


3. 移动 布局 单元 格 


移动 布局 单元 格 的 方法 是 : 选中 单元 格 边框 进行 拖 动 ,或 者 按 下 Ctrl 键 的 同时 单 击 
布局 单元 格 进行 拖 放 , 当 到 达 合适 的 位 置 时 ,释放 鼠标 即 可 。 


4. 调整 布局 单元 格 大 小 


如 果 要 改变 单元 格 的 大 小 ,可 以 先 选中 该 单元 格 ,然后 拖 动 控制 柄 到 满意 的 尺寸 即 
可 ,如 图 6-20 所 示 。 


由 
四 


ca 
图 6-19 调整 布局 表格 图 6-20 调整 布局 单元 格 


6.4.4 设置 布局 表格 和 单元 格 属性 

在 Dreamweaver 8.0 中 ,可 以 使 用 “属性 ”面板 来 改变 布局 模式 中 的 任何 布局 表格 或 
布局 单元 格 的 外 观 。 

1. 设置 布局 表格 属性 


当选 中 一 个 布局 表格 时 ,“ 属 性 ”面板 中 将 显示 该 表格 的 属性 ,如 图 6-21 所 示 。 在 “ 属 
性 ”面板 中 ,可 以 为 布局 表格 设置 内 容 对 齐 方式 、 宽 度 和 高 度 、 背 景 颜色 等 属性 。 其 各 选项 
的 功能 如 下 所 述 。 
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图 6-21 布局 表格 的 “属性 ”面板 


(1)“ 固 定 ” 单 选 按 钮 : 用 来 将 表格 设置 为 固定 宽度 。 选 择 该 项 后 ,可 在 其 后 的 文本 
框 中 输入 布局 表格 的 宽度 。 

(2)“ 自 动 伸 展 ” 单 选 按钮 : 选择 该 项 后 ,可 以 使 用 布局 表格 的 自动 伸展 功能 。 

(3)“ 高 "文本 框 : 用 来 输入 布局 表格 的 高 度 。 

(4) “背景 颜色 ”文本 框 : 用 来 为 布局 表格 指定 背景 颜色 。 

(5)“ 填 充 ? 文 本 框 : 用 来 设置 布局 单元 格 中 的 内 容 和 单元 格 边 框 之 间 的 距离 。 

(6)“ 间 距 ” 文 本 框 : 用 来 设置 布局 单元 格 之 间 的 距离 。 

(7)“ 清 除 行 高 ”按钮 瑟 : 用 来 清除 布局 表格 中 的 行 高 度 。“ 清 除 行 高 ”可 能 会 对 布局 
表格 中 的 空白 区 域 ( 即 不 包含 任何 单元 格 的 区 域 ) 产 生意 想不到 的 效果 。 

(8)“ 使 单元 格 宽度 一 致 "按钮 铝 : 用 来 自动 设置 布局 单元 格 与 其 内 容 相 匹配 的 
宽度 。 

(9)“ 删 除 所 有 间隔 图 像 "按钮 师 : 用 来 从 布局 表格 中 删除 所 有 的 间隔 图 像 。 

(10) “删除 嵌 套 ?按钮 图 : 用 来 删除 布局 表格 中 的 嵌 套 布局 表格 ,而 不 会 删除 该 表格 
中 的 内 容 。 


2. 设置 布局 单元 格 属性 


当选 中 一 个 布局 单元 格 时 ,“ 属 性 ”面板 中 将 显示 该 单元 格 的 属性 ,如 图 6-22 所 示 。 
在 “属性 ”面板 中 ,可 以 为 布局 单元 格 设置 内 容 对 齐 方式 、 宽 度 和 高 度 、 背 景 颜色 等 属性 。 
其 各 选项 的 功能 如 下 所 述 。 


布局 单元 格 。 宽 回回 定 。 E58 病 ! 水 区 人 国 TbfD 类 @[ 无 国 8 
〇 自动 伸展 育 景 可 钱 J |] 和 直 [mi 。 国 


| 


图 6-22 布局 单元 格 的 “属性 ”面板 


(1)“ 固 定单 选 按钮 : 用 来 将 单元 格 设置 为 固定 宽度 。 选 择 该 项 后 ,可 在 其 后 的 文 
本 框 中 输入 布局 单元 格 的 宽度 。 

(2)“ 自 动 伸展 * 单 选 按钮 : 选择 该 项 后 ,可 以 使 用 布局 单元 格 的 自动 伸展 功能 。 

(3)“ 高 "文本 框 : 用 来 输入 布局 单元 格 的 高 度 。 

(4)“ 背 景 颜色 ”文本 框 : 用 来 为 布局 单元 格 指定 背景 颜色 。 

(5)“ 水 平 ” 下 拉 列 表 框 : 用 来 设置 单元 格 内 容 的 水 平 对 齐 方式 ,包括 4 种 : 默认 、 左 
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对 齐 、 居 中 对 齐 和 右 对 齐 。 

(6)“ 垂 直 ” 下 拉 列 表 框 : 用 来 设置 单元 格 内 容 的 垂直 对 齐 方式 ,包括 5 种 : 默认 、 顶 
端 .中 间 底部 和 基线 。 

(7)“ 不 换行 " 复 选 框 : 用 来 在 输入 内 容 时 自动 改变 布局 单元 格 的 宽度 ,不 会 换行 。 

【实例 6-1】 利用 表格 实现 “T” 型 布局 。 

“T” 型 布局 容易 布局 内 容 ,用户 使 用 非常 方便 ,是 一 种 很 常用 、 高 效 的 网 页 布局 形式 。 
下 面 是 “T” 型 网 页 布局 的 实现 步骤 。 

(1) 在 Dreamweaver 8.0 中 新 建 一 个 网 页 。 

(2) 执行 “插入 ”一 “表格 "命令 ,在 网 页 中 插入 一 个 1 行 2 列 的 表格 ,宽度 为 776 像 
素 ,高度 为 80 像素 ,用 来 布局 Logo 与 Banner。 表 格 居中 对 齐 , 如 图 6-23 所 示 。 


boa tebe 
图 6-23 插入 表格 设置 Logo 和 Banner 区 域 


(3) 在 第 一 个 表格 的 下 面 , 插 入 一 个 1 行 9 列 的 表格 ,宽度 为 776 像素 ,居中 对 齐 , 作 
为 导航 条 ,如 图 6-24 所 示 。 


html 
FE 国 区 计 上 标题 天 所 是 文 人 ECGICS 


EEC a " Nh -da 


图 6-24 插入 表格 制作 导航 条 


(4) 在 导航 条 表格 下 ,插入 一 个 宽 776 像素 、 高 350 像素 的 1 行 2 列 的 表格 ,居中 对 
齐 , 左 边 单元 格 宽度 为 180 像素 ,如 图 6-25 所 示 。 
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(5) 在 左边 单元 格 中 插入 一 个 10 行 1 列 的 嵌 套 表格 ,宽度 为 100% ,用 做 左边 链接 
栏 , 如 图 6-26 所 示 。 


Ne 六 站 国 设计 | 标题: 于 标题 文 当 吹雪 关 |CEE 
3 mn 过 有 Ra 


avy etabie TV or [ae 


图 6-25 插入 表格 设置 内 容 区 域 


[Kbody) tabley<try<td>Ftable 习 


图 6-26 插入 嵌 套 表格 设置 内 容 链接 


(6) 在 最 下 面 插 入 一 个 1 行 1 列 、 宽 776 像素 .高 40 像素 的 表格 ,居中 对 齐 , 作 为 网 
站 版 权 信息 栏 ,如 图 6-27 所 示 。 

(7) 对 这 些 表格 进行 背景 颜色 与 边框 颜色 的 设置 以 后 ,就 完成 了 网 页 的 “T" 型 布局 。 
如 图 6-28 所 示 是 上 面 设计 的 “T” 型 网 页 效果 。 
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| 
sw | 


内 容 链 按 9 
时 


SOC " ela ~ 


le "T" 型 布局 - icrosoft Internet FExplorer 
ET Im 查看 人 收藏 (&) 工具 (T) 帮助 (E) 
Bis -日 四 国 的 有 P 寺 容 ek @| 全 -生日 -各 


波 引 四 | 傣 F:\nyveb\T 型 布局 ,hinl 
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图 6-28 “T” 型 网 页 布局 


6.5 框架 布局 


除了 上 面 介绍 的 表格 之 外 ,网 页 框架 也 是 Dreamweaver 对 页 面 布局 控制 的 一 种 重要 
手段 。 使 用 框架 可 以 将 一 个 浏览 器 窗口 划分 为 多 个 区 域 ,每 个 区 域 可 以 分 别 显示 不 同 的 
网 页 。 框 架 实 际 上 由 两 部 分 组 成 , 即 框架 与 框架 集 。 框 架 集 实际 上 是 一 个 页 面 ,用 于 定义 
文档 中 框架 的 结构 ,数量 .尺寸 及 装 和 框架 的 页 面 文件 ,所 以 框架 集 并 不 显示 在 浏览 器 中 ， 
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只 是 存储 了 一 些 框架 如 何 显示 的 信息 ,而 框架 则 是 框架 集中 的 单个 区 域 。 所 以 如 果 某 个 
页 面 被 划分 为 两 个 框架 ,那么 它 实际 上 包含 的 是 三 个 独立 的 文件 : 一 个 框架 集 文件 和 两 
个 框架 内 容 文件 。 


6.5.1 创建 框架 与 框架 集 


在 Dreamweaver 8.0 中 ,创建 框架 集 的 方法 有 两 种 : 一 种 是 用 户 自己 设计 框架 集 , 另 
一 种 是 使 用 系统 预定 义 的 框架 集 。 用 户 要 创建 框架 集 ,应 先 执行 “查看 ”>“ 可 视 化 助理 ” 
一 “框架 边框 命令 ,使 框架 边线 显示 出 来 。 


1. 创建 预定 义 框架 集 


Dreamweaver 8. 0 预先 定义 了 多 种 框架 集 ,利用 这 些 框架 集 ,用 户 可 以 快速 方便 地 在 
文档 中 创建 框架 。 创 建 预定 义 框架 集 的 方法 有 如 下 几 种 : 

(1) 执行 “文件 ”新 建 ”命令 ,打开 * 新 建文 档 ” 对 话 框 ,在 “常规 ?选项 卡 的 “类 别 ? 栏 
中 选中 “框架 集 ”, 在 中 间 的 “框架 集 ” 栏 中 可 以 选择 要 创建 的 框架 类 型 ,在 右 侧 的 “预览 ” 栏 
中 可 以 预览 选中 的 框架 类 型 ,如 图 6-29 所 示 。 


， 右 侧 内 套 
固定 ， 左 侧 肉 大 


， 上 十 方 世 亦 
， 下 方志 套 


汪 CSS) 
页 面 说 计 《有 转 助 功能 的 ) 


要 

左 侧 固定 

左 侧 回 定 ， 上 方 世 亦 

左 侧 固 定 ， 下 方 世 套 
水 平 拆 分 


回回 回回 回回 回回 回回 回回 回回 | 


xsaom 
|xHmL 1.0 Transiticnal 加 


图 6-29 “新 建文 档 对 话 框 


(2) 选择 “插入 "工具 栏 的 “布局 ”选项 卡 , 单 击 “框架 ”按钮 转 : 右 端的 下 拉 箭 头 ,然后 
在 弹出 的 下 拉 列 表 中 选择 预定 义 的 框架 结构 ,如 图 6-30 所 示 。 

(3) 在 文档 窗口 中 ,执行 “插入 ”>HTML 一 “框架 ”命令 ,在 弹出 的 子 菜单 中 选择 预定 
义 的 框架 结构 ,如 图 6-31 所 示 。 


2. 创建 自 定 义 框架 
如 果 Dreamweaver 8.0 中 预定 义 的 框架 不 能 满足 用 户 的 需要 , 则 可 以 自 定义 框架 结 
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构 。 创 建 自 定义 框架 集 的 操作 步骤 如 下 : 


布局 ~ 


Untitled-2. htnl* 


代码 | 写 : 国 设计 | 标题: 


大 标题 文 沿 


加 四 
加 左 侧 村 加 
加 右 仙 福 架 


le oO 
国 底部 柱 架 

辆 下方 入 套 的 堪 侧 框架 
| 国 下 方 和 让 套 的 万 侧 检 架 
| 回 左 侧 和 训 套 的 下 方 杠 加 
四 右 侧 和 赃 套 的 下 方 框架 
国 上 方 和 下 方 框架 

国 左 馈 和 谋 套 的 项 部 答 架 
右 侧 和 嵌 套 的 上 方 框架 
国 顶部 和 其 套 的 左 侧 框架 
| 园 上方 和 媒 守 的 万 侧 框架 


图 6-30 ”框架 结构 下 拉 列 表 


修改 D 文本 (TI) 命令 (C) 站 点 (8) 窗口 (D 帮助 (8) 


标签 (@)..。 
图 像 (I) 
图 像 对 象 (C) 
媒体 (ID) 


表格 (T) 
表格 对 象 (A) 
布局 对 象 (7) 


表单 (E) 


超级 链接 (P) 
电子 邮件 链接 (L) 
命名 锚 记 (ED) 
日 期 (0) 
服务 器 端 包括 (E) 
注释 (C) 


Ctrl+E 
Ctrl+Alt+I 


Ctrl+Alt+A 


模板 对 象 (0) 
最 近 的 代码 片断 (R) 


自 定义 收藏 夹 (UD).. 
获取 更 多 对 象 (2)，，， 


Ctrl1+ALt+T 
» 


Ej 国 :加 


"Cz 


一 水 平 线 (Z) 
p 


中 “文本 对 象 X) ， 
| 脚本 对 象 (E) ， 

文件 头 标签 (H) ， 
| 特殊 字符 (C) ， 


左 对 齐 (L) 
有 对 齐 (R) 
对 齐 上 缘 (T) 
对 齐 下 缘 (B) 


下 方 及 右 仙 区 套 (0D) 
左 侧 及 上 方 其 套 (E) 
左 侧 及 下 方 懂 讲 

右 侧 及 下 方 民 套 (I) 
右 侧 及 上 方 慌 套 (C) 
上 方 及 下 方 (E) 

上 方 及 左 侧 帐 套 (0) 
上 方 及 右 侧 嵌 套 


天 框架 


图 6-31 创建 框架 菜单 


(1) 执行 “查看 ”可 视 化 助理 ”一 "框架 边框 ”命令 ,页面 四 周 显示 出 框架 的 粗 轮廓 。 

(2) 执行 下 列 操作 之 一 : 

加 执行 “修改 ”>“ 框 架 页 "菜单 的 子 命令 即 可 根据 需要 创建 框架 。 

名 将 鼠标 移 到 文档 窗口 的 边界 线 上 , 当 光 标 变 成 双向 箭头 时 拖 动 光标 至 相应 的 位 
置 , 即 可 创建 框架 ,如 图 6-32 所 示 , 将 页 面 水 平分 为 两 个 区 域 。 

小 技巧 : 将 光标 移 到 框架 边框 的 任意 角 上 , 拖 动 鼠标 至 相应 位 置 ,可 一 次 拖 出 4 个 


边框 。 


3. 创建 嵌 套 框架 


幅 套 框架 就 是 在 已 创建 的 框架 集中 再 创建 新 的 框架 ,下 面 以 一 个 实例 来 介绍 创建 髋 
套 框架 的 具体 操作 步 又 。 
利用 框架 实现 * 口 ? 字 型 布局 ,如 图 6-33 所 示 。 


【实例 6-2】 
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图 6-32 自 定义 框架 集 


UntitledFrane-9 (XHTHL)#* 


I 


由 


图 6-33 “ 口 ? 字 型 布局 


(1) 执行 文件” 一“ 新建" 命 令 ,新 建 一 个 HTML 文档 。 

(2) 将 “插入 ”工具 栏 切换 到 “布局 ”选项 卡 , 单 击 “ 框 架 ”" 按 钮 右 端的 下 拉 箭 头 , 在 弹出 
的 下 拉 列 表 中 选择 * 上 方 和 下 方 框架 ”, 如 图 6-34 所 示 , 为 文档 插入 框架 ,效果 如 图 6-35 
所 示 。 


辆 左 侧 框架 
加 右 侧 框架 
国 顶部 框架 
国 底部 框架 
回 下方 和 帐 套 的 左 侧 框架 
图 下方 和 幅 套 的 右 侧 框架 
加 左 侧 和 由 春 的 下 方 框架 
图 右 侧 和 姑 套 的 下 方 框架 


一 区 和 
国 堪 侧 和 也 守 的 顶部 框架 


国 右 侧 和 由 套 的 上 方 杠 架 
国 项 部 和 由 套 的 左 侧 框架 
国 上 方 和 由 套 的 右 侧 框架 


lraneset)| fraacinainFrane) "joo -lelalaes 


图 6-34 菜单 (1) 图 6-35 插入 上方 和 下 方 框架 ” 
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(3) 将 鼠标 定位 在 中 间 的 主 框架 中 , 单 击 “ 布 局 ?选项 卡 中 的 “框架 ?按钮 右 端的 下 列 箭 
头 ,在 弹出 的 下 拉 列 表 中 选择 “ 左 侧 框架 ”, 如 图 6-36 所 示 , 或 者 执行 “修改 "框架 集 命 
令 , 在 子 菜单 中 选择 “ 拆 分 左 框架 ”命令 ,都 可 为 文档 插入 府 套 框架 ,效果 如 图 6-37 所 示 。 


册 rntitledFrame-9 (XHTHL) 
有 NE 


EEE 
轩 右 侧 相 


国 顶部 框架 

国 底部 框架 

回 下方 和 幅 套 的 左 侧 框架 
图 下 方 和 幅 套 的 右 侧 框架 
园 左 侧 和 帐 套 的 下 方 框架 
图 右 侧 和 帐 套 的 下 方 杠 架 
国 上方 和 下 方 框架 

园 左 侧 和 幅 套 的 顶部 框架 
国 右 侧 和 由 套 的 上 方 杠 架 
园 项 部 和 幅 套 的 左 侧 杠 架 
国 上方 和 幅 夺 的 右 侧 框架 


图 6-36 菜单 (2) 图 6-37 插入 * 左 侧 框架 ” 


(4) 将 鼠标 定位 在 右 侧 的 框架 中 ,同上 步骤 ,选择 “ 右 侧 框架 ?或 “ 拆 分 右 框架 ”命令 ， 
可 为 文档 又 插入 一 个 嵌 套 框架 , 即 完 成 了 * 口 ” 字 型 布局 的 创建 。 


6.5.2 编辑 框架 


创建 好 框架 后 ,就 可 以 对 框架 和 框架 集 进行 编辑 了 ,包括 选择 及 保存 框架 和 框架 集 、 
设置 框架 的 背景 .删除 框架 及 设置 框架 和 框架 集 属 性 等 。 


1. 选择 框架 和 框架 集 


对 框架 和 框 保 集 进行 某 些 操作 前 ,首先 需要 选 定 框 保 或 框 保 集 。 为 了 方便 用 户 选中 框 
架 ,Dreamweaver 自 带 有 “框架 "面板 。 打 开 “ 框 架 ” 面 板 的 方法 m5 
是 ,执行 “窗口 ">" 框架 ”命令 ,打开 “框架 ”面板 ,如 图 6-38 所 示 。 ee 

“ 框 保 ”面板 直观 地 显示 了 框架 集 内 各 框架 的 层次 结构 ,是 
各 框架 集 的 一 种 可 视 化 的 表现 形式 。 在 “框架 面板 中 ,框架 集 
边框 是 粗 线 ,而 框架 边框 则 是 细 灰 线 边框 ,并 且 每 个 框架 由 框 
架 名 称 来 标识 。 

如 果 要 在 “框架 面板 中 选择 一 个 框架 , 则 单 击 框架 ;如 果 
要 选择 一 个 框架 集 , 则 单 击 环绕 框架 集 的 边框 。 

另 一 种 选中 框架 的 方法 是 : 在 文档 窗口 中 的 某 个 框架 内 按 “并 
住 Alt 键 的 同时 单 击 要 选择 的 框架 , 即 可 选中 该 框架 。 在 文档 。 图 638 “框架 "面板 
窗口 中 直接 单 击 框架 边框 , 即 可 选中 框架 集 。 


2. 保存 框架 和 框架 集 
框架 页 面 制 作 完 成 后 ,框架 组 中 包括 了 多 个 文档 ,每 个 框架 区 域 中 都 将 显示 一 个 页 
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面 , 所 以 保存 时 要 将 所 有 的 文档 都 保存 ,在 浏览 器 中 才能 够 正确 地 显示 , 同时 ， 
Dreamweaver 8.0 会 生成 一 个 框架 文件 ,来 保存 页 面 中 定义 的 框架 的 大 小 和 位 置 以 及 每 
个 框架 中 要 载 人 的 文件 信息 。 

在 “文件 "菜单 下 ,Dreamweaver 8. 0 提供 了 3 个 与 框架 有 关 的 保存 命令 ,分 别 是 “ 保 
存 框 架 页 “框架 集 男 存 为 “保存 全 部 ”。 其 中 前 两 个 命令 是 用 于 保存 框架 集 文件 的 ,后 
者 在 保存 文件 时 可 以 对 文件 重 命名 。 第 3 个 命令 是 将 页 面 中 包括 的 所 有 框架 集 、 框 架 文 
件 一 同 保存 。 

3. 设置 框架 的 背景 

为 丰富 页 面 , 用 户 可 以 为 框架 添加 背景 ,背景 可 以 是 图 像 也 可 以 是 颜色 。 如 果 网 页 上 
有 多 个 框架 ,可 以 为 每 个 框架 设置 不 同 的 背景 。 实 际 上 ,设置 框架 的 背景 与 添加 网 页 的 背 
景 相 同 , 只 是 前 者 是 为 单个 框架 设置 背景 ,而 后 者 是 为 整个 网 页 设置 背景 。 为 框架 设置 背 
景 的 具体 操作 步骤 如 下 

(1) 将 鼠标 放 到 要 添加 背景 的 框架 内 。 

(2) 执行 “修改 ”一 “页 面 属性 ”命令 ,打开 “页 面 属性 ”对 话 框 ,如 图 6-39 所 示 。 


男 
: 集 素 bj ”~ 右边 距 (R): [ 作 素 zi ~| 
:| ]( 佛 林 EE | | 下边 现 GO 引 。。 ]( 优 素 Gai il | 


确定 取消 ”] [应 用 (&) ] 


图 6-39 “页 面 属性 ”对 话 框 
(3) 在 “背景 颜色 ”或 “背景 图 像 * 选 项 中 选择 颜色 或 图 片 。 
(4) 单 击 “ 确 定 ” 按 钮 , 即 可 为 框架 插入 背景 颜色 或 图 片 。 
4. 删除 框架 
当 需 要 删除 创建 的 框架 时 ,将 鼠标 放 到 该 框架 的 边框 上 , 当 鼠 标 变 为 双 箭 头 4 或 吉 
时 ,将 该 边框 线 拖 离 页 面 或 拖 动 到 其 他 框架 边框 上 即 可 。 
5. 设置 框架 属性 


设置 框架 属性 时 ,首先 选中 框架 ,然后 在 “属性 ”面板 中 进行 设置 。 选 中 框架 后 的 “ 属 
性 ”面板 ,如 图 6-40 所 示 。 
其 中 各 选项 功能 如 下 所 述 。 


第 6 章 网 页 的 排版 布局 。 (和) 


RS 


辑 框架 名 称 源 文件 file:///E|/nyveb/Intitled1 SC 边框 | 默认 国 
ainFrane 流动 | 默认 国 口 不 能 调整 大 小 边框 关 色 [| 


图 6-40 框架 * 属 性 ?面板 


(1) 框架 名 称 : 用 于 设置 框架 的 名 称 。 名 称 必须 是 一 个 以 字母 开头 的 单词 ,允许 使 
用 下 划 线 和 数字 。 

(2) 源 文件 : 用 于 设置 框架 对 应 的 源 文件 , 单 击 文件 夹 图 标 ,可 以 在 弹出 的 “选择 
HTML 文件 ”对 话 框 中 选择 源 文件 。 

(3) 滚动 : 用 于 设置 当 显示 空间 不 够 时 是 否 显示 深 动 条 ,包括 “是”“ 否 ”“ 自 动 ”、 
“默认 ”4 项 ,分 别 表示 显示 ,不 显示 、 当 空间 不 够 时 自动 显示 和 由 浏览 器 决定 。 

(4) 不 能 调整 大 小 : 选中 此 复 选 框 ,可 禁止 改变 框架 的 尺寸 。 

(5) 边框 : 用 于 设置 当前 框架 的 边框 是 否 显示 ,包括 “是 ”“ 否 "和 “上 默认 ”3 项 ,分 别 表 
示 显 示 、 不 显示 和 使 用 浏览 器 默认 定义 。 

(6) 边框 颜色 : 用 于 设置 框架 边框 的 颜色 。 

(7) 边界 宽度 和 边界 高 度 : 用 于 设置 框架 内 容 与 边界 之 间 的 距离 数值 ,单位 为 像素 。 


6. 设置 框架 集 属性 


通过 ”属性 ?面板 也 可 以 很 方便 地 设置 框架 集 的 属性 ,选中 框架 集 时 的 “属性 ”面板 如 
图 6-41 所 示 。 


列 ; 


1 


图 6-41 框架 集 * 属 性 ?面板 


其 中 各 选项 功能 如 下 所 述 。 

(1) 边框 : 用 于 设置 是 否 显示 框架 集中 所 有 框架 的 边框 。 

(2) 边框 宽度 : 用 于 设置 边框 的 宽度 ,单位 为 像素 。 输 入 0 时 则 不 显示 边框。 
(3) 边框 颜色 : 用 于 设置 边框 的 颜色 。 

(4) 行 : 用 于 设置 框架 集 的 宽度 ,并 在 其 后 的 “单位 ”下 拉 列 表 中 选择 宽度 单位 。 


6.6 层 的 使 用 


层 是 HTML 中 的 一 种 页 面 元 素 , 也 是 页 面 中 元 素 的 容器 ,借助 层 可 以 实现 页 面 元 素 
的 精确 定位 , 层 在 网 页 中 的 位 置 是 不 受 限 制 的 ,可 以 放置 在 页 面 的 任何 位 置 , 在 一 个 网 页 
中 可 以 通过 层 的 重合 和 设置 层 的 可 见 性 来 实现 一 些 特殊 效果 。 
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6.6.1 创建 层 


1. 创建 普通 层 


在 Dreamweaver 8. 0 中 创建 层 , 可 以 采取 以 下 3 种 方法 之 一 : 

(1) 将 鼠标 置 于 文档 窗口 中 要 插入 层 的 位 置 ,执行 “插入 ”一 “布局 对 象 >>“ 层 ”命令 。 

(2) 将 “插入 ”工具 栏 切换 到 “布局 ”选项 卡 , 然 后 单 击 该 选项 卡 中 的 绘制 层 按钮 图 ,在 
文档 窗口 中 按 住 鼠 标 左 键 并 拖 动 鼠标 绘制 一 个 层 。 

(3) 在 “布局 ”选项 卡 中 单 击 绘制 层 按钮 鲜 , 按 住 鼠标 左 键 不 放 , 从 工具 栏 中 拖 放 到 文 
档 窗口 中 , 松 开 鼠 标 ,就 可 以 创建 一 个 层 。 

小 技巧 : 单 击 绘制 层 按钮 图 , 按 下 Ctrl 键 不 松手 ,在 文档 窗口 中 就 可 以 连续 绘制 出 多 
个 不 同 的 层 。 


2. 创建 嵌 套 层 


Dreamweaver 8. 0 允许 在 已 有 的 层 中 再 能 入 层 ,通常 把 工 入 的 层 称 为 子 层 ,已 有 的 层 
称 为 父 层 。 使 用 层 的 典 套 可 以 将 几 个 关系 紧密 的 层 组 合 在 一 起 。 移 动 父 层 , 子 层 将 与 它 
一 起 移动 ;改变 父 层 的 可 见 性 , 子 层 可 以 继承 它 的 可 见 性 。 

创建 嵌 套 层 可 以 采取 下 列 方法 : 

(1) 将 鼠标 放 在 已 经 创建 好 的 父 层 中 ,执行 “插入 ”一 “布局 对 象 ">>“ 层 "命令 , 即 可 在 
已 有 的 层 中 插入 一 个 子 层 。 

(2) 直接 将 “布局 "工具 栏 中 的 绘制 层 按钮 因 拖 放 到 已 创建 好 的 父 层 中 。 

注意 : 说 套 层 并 不 一 定 是 页 面 上 一 层 位 于 另 一 层 内 ,它们 可 以 分 布 在 页 面 的 不 同位 
置 ,但 是 它们 的 HTML 代码 一 定 是 层 层 谋 套 的 。 如 图 6-42 所 示 的 页 面 中 创建 了 两 个 层 
Layerl 和 Layer2, Layer2 并 没有 位 于 Layerl 内 ,但 是 它 的 HTML 代码 却 是 谋 套 在 
Layerl 的 HTML 代码 之 内 的 ,所 以 可 以 肯定 它 是 谋 套 层 。 反 过 来 ,即使 在 位 置 上 它们 是 


电 Untitled-3 (XHTIL)# 


图 6-42 嵌 套 层 
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一 层 位 于 另 一 层 之 内 ,但 如 果 它 们 的 HTML 代码 互 不 包含 ,那么 就 可 以 肯定 不 是 周 套 
层 , 如 图 6-43 所 示 。 


晤 Untitled-3 (XHTHL)# 


图 6-43 非 嵌 套 层 


6.6.2 设置 层 属性 


创建 层 后 ,可 以 对 层 进行 属性 的 设置 。 首 先 单 击 选 中 层 ,其 * 属 性 ?面板 如 图 6-44 所 
示 , 各 项 含义 如 下 所 述 。 


加 层 编号 在 (L) [163px] 宽 [ 207o z 轴 古 ] 背景 图 像 已 ”类 (人 C) [无 国 旬 
PE 国 上 (yiz3px] 高 [Iiopx 可见 性 [aefault 国 。 表 需 [| 
溢出 司 芭 吉 :三 夺 
上 胃 


图 6-44 层 “ 属 性 ”面板 


(1) 层 编号 : 用 于 指定 一 个 名 称 ,可 以 为 当前 层 命名 。 命 名 时 只 能 使 用 标准 的 字母 、 
数字 和 字符 ,而 不 能 使 用 空格 、 连 字符 、 斜 杠 或 句号 等 特殊 字符 。 每 个 层 都 必须 有 它 自 己 
唯一 的 名 称 。 

(2) 左 : 设置 层 左边 相对 于 页 面 左边 或 父 层 左边 的 距离 。 

(3) 上 : 设置 层 顶端 相对 于 页 面 顶端 或 父 层 顶端 的 距离 。 

(4) 宽 和 高 : 设置 层 的 宽度 或 高 度 值 。 

(5) Z 轴 : 设置 层 的 Z 轴 顺 序 , 也 就 是 设置 嵌 套 层 在 网 页 中 的 重 释 顺 序 。 在 浏览 器 
中 ,编号 较 大 的 层 出 现 在 编号 较 小 的 层 的 前 面 。 

(6) 可 见 性 : 设置 该 层 是 否 可 见 。 其 中 default 表示 默认 值 , 其 可 见 性 由 浏览 器 决定 ， 
大 多 数 浏览 器 都 继承 该 层 父 层 的 可 见 性 ;inherit 表示 该 层 使 用 父 层 的 可 见 性 ; visible 表 
示 显 示 该 层 的 内 容 ;hidden 表示 隐藏 该 层 的 内 容 。 

(7) 背景 图 像 : 设置 层 的 背景 图 像 。 

(8) 背景 颜色 : 设置 层 的 背景 颜色 。 如 果 将 此 项 留 为 空白 , 则 可 以 指定 透明 的 背景 。 
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(9) 类 : 选择 层 的 样式 。 

(10) 溢出 : 控制 当 层 的 内 容 超 过 层 的 指定 大 小 时 如 何在 浏览 器 中 显示 层 的 内 容 。 
其 中 ,visible( 可 见 ) 表 示 当 层 中 的 内 容 超出 层 范围 时 , 层 自动 向 右 或 向 下 扩展 ,使 层 能 够 
容纳 并 显示 其 中 的 内 容 ;hidden( 隐 藏 ) 表 示 当 层 中 的 内 容 超 出 层 范 围 时 , 层 的 大 小 保持 不 
变 , 也 不 出 现 滚动 条 ,超出 层 范围 的 内 容 不 显示 :scroll( 滚 动 ) 表 示 在 层 上 添加 滚动 条 ,不 
管 层 中 的 内 容 是 否 超出 层 范围 , 层 的 右 端 和 下 端 都 会 出 现 滚动 条 ;auto( 自 动 ) 使 浏览 器 仅 
在 需要 时 ( 即 当 层 的 内 容 超 过 其 边界 时 ) 才 显示 层 的 滚动 条 。 

(11) 剪辑 : 可 以 设置 层 的 可 见 区 域 。 指 定 “ 左 ”“ 右 ”“ 上 ”和 “下 ”的 值 可 以 设置 层 
在 各 个 方向 上 的 可 见 区 域 与 层 边 界 的 距离 (从 层 的 左上 和 角 开 始 计算 )。 层 经 过 “剪辑 ”后 ， 
只 有 指定 的 矩形 区 域 才 是 可 见 的 。 例 如 , 若 要 使 一 层 中 左上 角 50 像素 宽 、75 像素 高 的 矩 
形 区 域 可 见 而 其 他 内 容 均 不 可 见 , 可 以 将 * 左 ?设置 为 0, 将 * 上 ?设置 为 0, 将“ 右 ” 设 置 为 
50, 将 “下 ”设置 为 75。 


6.6.3 ” 层 的 基本 操作 


层 的 基本 操作 包括 层 的 选择 、 调 整 层 的 大 小 、 移 动 层 、 对 齐 层 、 改 变 层 的 可 见 性 ,设置 
层 的 释放 次 序 等 。 


1. 显示 “ 层 ” 面 板 


通过 * 层 ?面板 可 以 管理 文档 中 的 层 。 使 用 层面 板 可 防止 重 肆 ,更改 层 的 可 见 性 ,将 层 
嵌 套 或 层 琶 ,以 及 选择 一 个 或 多 个 层 。 

执行 “窗口 >“ 层 ” 命 令 或 按 F2 键 即 可 显示 “ 层 ” 面 板 。 
当前 文档 中 的 层 都 会 显示 在 “层面 板 的 列表 中 ,能 套 以 树 
状 结构 显示 ,如 图 6-45 所 示 。 

注意 : 在 “ 层 ” 面 板 中 如 果 选 中 到 了 畏 下 重 台 复 选 框 , 则 可 以 
防止 层 重 登 ,但 是 就 不 能 创建 议 套 层 了 。 


2. 选择 层 图 6-45 “ 层 "面板 


要 对 层 进行 操作 和 设置 需 先 将 其 选中 ,单个 层 和 多 个 
层 的 选择 方法 不 同 。 
1) 单个 层 的 选择 
选择 单个 层 的 方法 有 如 下 两 种 : 
(1) 单 击 所 需 层 的 边框 。 
(2) 在 “ 层 ” 面 板 中 单 击 所 需 层 的 名 称 。 
2) 多 个 层 的 选择 
选择 多 个 层 的 方法 也 有 如 下 两 种 : 
(1) 按 住 Shift 键 ,在 每 个 要 选择 的 层 中 或 边框 上 单 击 鼠 标 , 即 可 选择 多 个 层 。 
(2) 按 住 Shift 键 并 依次 单 击 “ 层 ”面板 上 的 层 名 称 。 
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3. 调整 层 的 大 小 


1) 单个 层 的 大 小 调整 

调整 单个 层 大 小 只 需 进 行 如 下 任意 操作 即 可 : 

(1) 选择 要 调整 的 层 ,在 “属性 ”面板 的 “ 宽 "…“ 高 ”文本 框 中 输入 所 需 的 宽度 和 高 度 值 
即 可 。 

(2) 将 鼠标 移动 到 选中 层 的 控制 点 上 , 拖 动 鼠标 即 可 调整 层 的 宽度 和 高 度 。 

(3) 按 住 Ctrl 键 再 按键 盘 上 的 方向 键 , 可 以 一 次 调整 1 个 像素 的 大 小 ; 按 住 Shift 十 
Ctrl 键 的 同时 再 按键 盘 上 的 方向 键 , 可 以 一 次 调整 10 个 像素 的 大 小 。 

2) 多 个 层 的 大 小 调整 

选择 需要 调整 大 小 的 多 个 层 ,然后 执行 “修改 ”>“ 排 列 顺序 ”>“ 设 成 宽度 相同 ”(“ 设 
成 高 度 相同 ”) 命 令 , 则 所 有 选择 的 层 将 设置 为 最 后 选择 层 的 宽度 或 高 度 ,也 可 在 “属性 ” 面 
板 的 “ 宽 "“ 高 "文本 框 中 输入 所 需 的 宽度 值 和 高 度 值 。 


4. 移动 层 


层 的 最 大 特点 就 是 可 以 在 文档 窗口 中 任意 移动 。 移 动 层 常用 的 方法 有 如 下 三 种 : 

(1) 选中 层 , 在 “属性 ?面板 的 “ 左 “ 上 ”文本 框 中 输入 相应 的 数值 , 即 可 改变 层 在 页 
面 中 的 位 置 。 

(2) 选中 层 ,将 鼠标 放 至 层 边框 上 , 当 鼠 标 变 为 十 ?字形 企 时 , 拖 动 鼠标 到 适合 位 置 
后 松 开 鼠 标 即 可 。 

(3) 选中 层 , 使 用 键盘 方向 键 移动 ,可 以 每 次 移动 1 个 像素 ; 按 住 Shift 键 再 按键 盘 方 
向 键 移动 ,可 以 每 次 移动 10 个 像素 。 


5。 对齐 层 


当 利 用 层 对 网 页 进行 布局 时 ,将 层 分 别 拖 动 并 对 齐 是 一 件 很 麻烦 的 事 。 但 在 
Dreamweaver 8.0 中 提供 了 对 齐 工 具 来 方便 层 的 对 齐 。 其 操作 也 很 简单 : 选择 需 对 齐 的 
层 , 执 行 “修改 ”>“ 排 列 顺序 ”命令 下 的 子 命令 即 可 。 层 的 对 齐 有 以 下 几 种 方式 。 

(1) 左 对 齐 : 可 以 将 选中 的 层 的 左 端 同 最 后 选中 的 层 的 左 端 对 齐 。 

(2) 右 对 齐 : 可 以 将 选中 的 层 的 右 端 同 最 后 选中 的 层 的 右 端 对 齐 。 

(3) 对 齐 上 缘 : 可 以 将 选中 的 层 的 顶端 同 最 后 选中 的 层 的 顶端 对 齐 。 

(4) 对 齐 下 缘 : 可 以 将 选中 的 层 的 底 端 同 最 后 选中 的 层 的 底 端 对 齐 。 


6. 改变 层 的 可 见 性 


层 的 可 见 性 可 以 控制 层 内 元 素 的 显示 与 隐藏 ,从 而 设计 出 网 页 的 一 些 特殊 效果 。 可 
以 使 用 层面 板 或 属性 面板 来 改变 层 的 可 见 性 。 

1) 使 用 * 层 ?面板 改变 层 的 可 见 性 

在 层 的 眼睛 图 标 列 内 单 击 可 以 更 改 其 可 见 性 ,图 标 将 随 每 次 单 击发 生变 化 。 睁 开 的 
有 眼睛 图 标 篇 表示 该 层 处 于 显示 状态 ;闭合 的 眼睛 图 标本 表示 该 层 处 于 隐藏 状态 ;如 果 没 
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有 了 眼睛 图 标 ,该 层 通常 会 继承 其 父 层 的 可 见 性 (如 果 层 没有 嵌 套 , 父 层 就 是 文档 正文 ,而 广 
档 正文 始终 是 可 见 的 )。 

小 技巧 : 如 果 要 同时 改变 所 有 层 的 可 见 性 , 单 击 * 层 ?面板 该 列 顶 部 的 标题 眼睛 图 标 
即 可 。 

2) 使 用 “属性 ”面板 更 改 层 的 可 见 性 

在 层 的 “属性 ”面板 的 “可 见 性 "下拉 列表 中 设置 相应 的 选项 即 可 ,如 图 6-46 所 示 。 


visible 
[aefauit 
inherit 


\e 


[hidden， 


图 6-46 使 用 * 属 性 ?面板 改变 可 见 性 


7. 设置 层 的 又 放 次 序 


层 与 其 他 对 象 元 素 不 同 , 它 除了 具有 平面 上 的 上 下 左右 位 置 外 , 它 还 具有 垂直 的 位 
置 ,叫做 层 的 琶 放 次 序 。 设 置 层 的 重 放 次 序 可 以 在 “属性 ?面板 或 * 层 "面板 中 进行 ,也 可 以 
通过 菜单 命令 来 设置 。 

1) 在 “属性 ”面板 中 更 改 番 放 次 序 

选择 需要 改变 释放 次 序 的 层 , 在 “属性 ”面板 中 的 *Z 轴 ” 文 本 框 中 输入 所 需 的 数值 ,如 
图 6-47 所 示 , 大 于 原 数值 可 将 该 层 在 倒 放 顺序 中 上 移 , 小 于 原 数 值 可 将 该 层 在 合 放 顺序 
中 下 移 。 


加 层 编号 左 (L)[ 126px] ” 宽 [ 165px 2 轴 上 背景 图 像 局 类 (@) | 无 国 9 
Laverl 国 
上 (CD[ 79px| 高 [109px| 可见 性 [EEC 对 及 毅 色 


图 6-47 “属性 ”面板 中 的 “Z 轴 ?” 设 置 


2) 在 * 层 ?面板 中 更 改 释放 次 序 

在 “层面 板 中 可 以 直接 输入 层 的 Z 值 ,或 者 选择 所 需 的 层 按 住 鼠标 左 键 不 放 将 其 上 
下 拖 动 , 当 到 达 所 需 的 位 置 后 释放 鼠标 即 可 。 

3) 用 菜单 命令 更 改 秋 放 次 序 

选择 需 更 改 顺序 的 层 , 在 “修改 *->“ 排 列 顺序 ”菜单 中 选择 子 菜单 “ 移 到 最 上 层 ” 或 “ 移 
到 最 下 层 ” 命 令 即 可 。 

【实例 6-3】 利用 层 制 作 阴影 字 。 

在 网 站 中 经 常会 看 到 一 些 阴 影 字 , 阴 影 字 从 视觉 上 给 浏览 者 一 种 立体 感 。 通 过 利用 
层 的 至 加 性 可 以 实现 这 一 效果 。 

(1) 新 建 一 个 HTML 文档 。 在 “布局 ?插入 工具 栏 中 单 击 * 绘 制 层 "按钮 融 , 在 编辑 窗 
口中 绘制 一 个 层 Layerl 。 

(2) 选中 该 层 , 在 “属性 ?面板 中 设置 “ 宽 ” 为 200,“ 高 ”为 50。 

(3) 将 鼠标 置 于 层 中 ,输入 文字 "留言 板 ”, 设 置 字体 为 “隶书 ”, 大 小 为 54, 颜 色 为 
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#FF33CC, 如 图 6-48 所 示 。 
(4) 重复 上 述 步 又 ,在 编辑 窗口 中 再 插入 一 个 与 Layerl 大 小 相同 的 层 Layer2, 在 层 
中 输入 相同 的 文字 ,字体 为 “隶书 ”, 大 小 为 54 ,颜色 设置 为 #fFFCC99, 如 图 6-49 所 示 。 


日 前 下 :\myweb\ 阴 影 字 . html (XHTIL)# 

引 
有 辐 
对 E77 ~ 
| 留言 板 
国 
四 
RHHv STYLEIWLayerl Nooo ~ wR/L 

图 6-48 插入 Layerl 图 6-49 插入 Layer2 


(5) 选中 两 个 层 , 执 行 “修改 ”一 “排列 顺序 ”>“ 左 对 齐 ” 命 令 , 使 Layerl 和 Layer2 左 
对 齐 。 再 执行 “修改 ”一 "排列 顺序 ”对齐 上 缘 ? 命 令 , 让 Layer2 对 齐 到 Layerl。 这 时 
Layerl 和 Layer2 重合 ,如 图 6-50 所 示 。 

(6) 在 “ 层 ” 面 板 中 ,选中 Layer2, 分 别 按 5 下 键盘 上 的 向 右 “ 二 ”和 向 上 “和 ”方向 键 ， 
将 其 向 右 和 向 上 各 移动 5 个 像素 ,如 图 6-51 所 示 。 


时 
叫 
兴 


div STY7LEI RL aver i NS ~ ra 


图 6-50 重合 层 图 6-51 调整 Layer2 位 置 


(7) 保存 网 页 , 按 F12 键 预览 ,效果 如 图 6-52 所 示 。 
(8) 如 果 不 满意 层 的 倒 加 次 序 , 可 以 选中 Layer2 ,在 “属性 ?面板 上 将 Z 轴 改 为 0。 预 
览 效 果 如 图 6-53 所 示 。 


6.6.4 层 与 表格 的 转换 


层 与 表格 都 可 以 用 来 进行 页 面 元 素 的 定位 ,但 层 是 可 以 随意 移动 的 ,应 用 层 来 进 和 


沁 
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委 阴 影 字 效果 - Eicroso: ft Inter... [- GI/X| EE [E33| 
文件 (E) 编辑 (E) 查看 () 收藏 4) 工 ” 廊 文件 (E) 编辑 (E) 查看 (Y) 收藏 他 ) 工 ” 
| 
@iiE - 日 - 国 国 的 | 用 遇 @Fs - 日 - 国 国 伪 | 甩 要 
可 


旭 相 加 | 多 E:\nyveb\ 阴 影 字 .htn] 图 | 回转 到 性 关 半 地 址 名) 


EN ET 
图 6-52 预览 效果 (1) 图 6-53 预览 效果 (2) 


面 设计 ,更 快速 方便、 灵活。 但 是 目前 浏览 器 只 有 4.0 以 上 的 高 版 本 才 支持 层 , 考 虑 到 兼 
容 性 和 修改 时 方便 ,一 般 可 在 编辑 网 页 时 采用 层 布局 或 者 部 分 页 面 采用 层 布局 ,而 在 发 布 
网 页 时 再 将 其 转换 为 表格 布局 。 需 要 时 ,也 可 以 在 层 和 表格 之 间 相 互 转换 ,以 调整 布局 和 
页 面 优化 。 


1. 层 转 换 为 表格 
将 层 转换 为 表格 的 具体 操作 步 又 如 下 ， 


(1) 执行 “修改 "转换 ”~ 层 到 表格 ”命令 ,打开 ”转换 层 为 表格 对话 框 ,如 图 6-54 
所 示 。 对 话 框 上 各 项 的 含义 如 下 所 述 。 


转换 层 为 表格 


和 人 人 
小 于 : [|] 像素 宽度 
lia GIF (OT) 
置 于 页 面 中 央 (C) 


: 口 防止 民 重 得) 

星 示 层面 板 () 

口 显示 网 格 @) 

千 齐 到 网 格 (8) 


图 6-54 “转换 层 为 表格 ”对话 框 


@ 最 精确 : 为 每 个 层 创 建 一 个 单元 格 ,以 及 为 保持 层 与 层 之 间 的 间隔 建立 附加 单 
元 格 。 

@ 最 小 : 当 层 的 边 距 相差 在 指定 数值 范围 内 时 ,相应 的 边缘 应 看 作对 齐 。 这 样 就 可 
以 减少 一 些 不 必要 的 单元 格 。 

@ 使 用 透明 GIF: 用 透明 的 GIF 图 像 填 充 表 格 最 后 一 行 , 确 保 它 在 所 有 浏览 器 中 显 
示 均 相同 。 

@ 置 于 页 面 中 央 : 将 转换 后 的 表格 在 页 面 中 居中 对 齐 ,默认 为 左 对 齐 。 

@ 防止 层 重合: 当 层 重 登 时 ,转换 无 法 进行 。 

@ 显示 层面 板 : 转换 完 后 显示 层面 板 。 
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@ 显示 网 格 : 转换 完 后 显示 网 格 。 
@ 靠 齐 到 网 格 : 转换 完 后 对 齐 网 格 。 
(2) 设置 完成 后 单 击 “ 确 定 ” 按 钮 。 


2. 表格 转换 为 层 


将 表格 转换 为 层 的 操作 与 将 层 转换 为 表格 的 操作 类 似 , 具 体操 作 步 骤 如 下 : 
(1) 打开 要 转换 成 层 的 表格 。 
(2) 执行 “修改 ”>“ 转 换 ”>“ 表 格 到 层 ” 命 


布局 工具 : 四 | 防 直 居 重 尖 全 | 
令 , 打 开 * 转 换 表 格 为 层 "对 话 框 , 如 图 6-55 SD 区 
所 示 。 回 香 齐 到 网 格 (8) [QD] 
(3) 在 对 话 框 中 选中 相应 的 选项 后 , 单 击 图 6-55 “转换 表格 为 层 "对 话 框 
“确定 ”按钮 即 可 。 
说 明 ; 


(1) 将 表格 转换 为 层 时 , 空 的 表格 单元 格 不 转换 ,表格 之 外 的 内 容 也 将 被 置 于 层 中 。 
(2) 因为 表格 单元 不 会 重合 ,所 以 Dreamweaver 8. 0 不 会 把 重 登 的 层 转 换 为 表格 。 
所 以 如 果 计 划 把 一 个 文档 中 的 层 转 换 为 表格 ,就 要 在 建立 层 、 移 动 层 和 调整 层 大 小 时 防止 


层 发 生 重 司 。 
6.7 习 是 

一 、 选 择 题 
1. 在 Dreamweaver 8. 0 中 ,表格 的 主要 作用 是 

A. 用 来 组 织 数据 B. 用 来 表现 图 片 

C. 实现 网 页 的 精确 排版 和 定位 D. 用 来 设计 新 的 页 面 
2. 在 选择 多 个 单元 格 时 , 按 键 可 以 选择 不 连续 单元 格 。 

A. Shift B, ‘Cril C. Alt D. Enter 
3. 如 果 要 在 布局 模式 中 绘制 单元 格 , 则 下 列 说 法 不 正确 的 是 


A. 创建 的 单元 格 不 能 相互 交叉 

B. 绘制 后 的 单元 格 可 以 任意 调整 大 小 和 位 置 

C. 不 能 脱离 表格 而 独立 存在 

D. 如 果 在 页 面 的 空白 区 域 中 绘制 单元 格 , 则 会 自动 产生 一 个 表格 作为 单元 格 的 


容器 
4. 要 设置 框架 的 背景 颜色 ,要 在 中 进行 设置 。 
A.“ 属 性 ”面板 B.“ 页 面 属性 ”对 话 框 
C.“ 框 架 ? 面 板 D.“ 首 选 参数 "对话 框 


5. 层 的 Z 轴 属性 决定 了 层 的 倒 放 功能 ,下 列 说 法 不 正确 的 是 
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. Z 轴 可 以 为 负 值 
. Z 轴 可 以 为 零 
. Z 轴 值 较 大 的 层 位 于 Z 轴 值 较 小 的 层 之 上 
. Z 轴 值 较 大 的 层 位 于 Z 轴 值 较 小 的 层 之 下 
6. 关于 框架 和 框架 集 的 说 法 中 ,不 正确 的 是 a 
A. 框架 集 是 在 一 个 文档 内 定义 了 一 组 框架 结构 的 HTML 网 页 
B. 框架 是 浏览 器 窗口 中 的 一 个 区 域 
C. 框架 集 是 浏览 器 窗口 的 一 个 区 域 
D. 在 框架 集中 定义 了 网 页 显示 的 框架 数 、 框 架 的 大 小 、 载 入 框架 的 网 页 源 等 属性 


二 、 操 作 题 


1. 制作 一 个 6 行 8 列 的 表格 ,表格 宽度 为 600 像素 ,边框 宽度 为 2 像素 ,单元 格 边 距 
和 间距 都 为 1 像素 ,表格 背景 颜色 为 蓝 色 ,表格 在 网 页 中 居中 对 齐 。 

2. 在 第 1 题 中 的 第 2 行 第 5 列 中 嵌入 一 个 1 行 2 列 的 .宽度 为 100%% 的 无 边框 表格 。 

3. 创建 如 图 6-56 所 示 的 框架 。 


OR 


BS 


及 sx 下 ke @| 全 "加 国 - 各 


.ht 


图 6-56 框架 结构 
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添加 网 页 元 素 


网 页 元 素 是 网 页 内 容 的 主要 表现 形式 ,主要 包括 文本 、 符 号 、 图 片 .动画 、 媒 体 以 及 超 
链接 。 文 本 和 图 像 是 网 页 中 最 常用 的 信息 表现 方式 ,多 媒体 元 素 可 以 增强 网 页 的 可 视 性 ， 
链接 则 可 以 实现 不 同 网 页 之 间 的 联系 。 下 面 开 始 学 习 如 何在 网 页 中 添加 各 种 网 页 元 素 。 


本 章 学 习 要 点 : 


。 添加 文本 

* 添加 图 像 

。 添加 多 媒体 元 素 
。 添 加 超 链接 


7.1 添加 文本 


文本 就 是 常 说 的 文字 , 它 是 网 页 中 运用 最 广泛 的 元 素 之 一 ,担负 着 传递 信息 的 重要 任 
务 ,其 信息 传 载 的 方式 是 其 他 任何 一 种 网 页 元 素 都 无 法 替代 的 。 网 页 中 的 文本 主要 包括 
普通 文本 和 特殊 文本 两 类 。 本 节 将 详细 介绍 如 何在 网 页 中 添加 和 编辑 文本 对 象 。 


7.1.1 添加 普通 文本 


在 Dreamweaver 8.0 中 为 网 页 添加 文本 的 方法 主要 有 3 种 : 直接 输入 文本 、 复 制 文 
本 和 导入 文本 。 
1. 直接 输入 文本 


在 Dreamweaver 8. 0 中 输入 文本 和 在 Word 等 文字 工具 中 操作 一 样 ,只 需 将 鼠标 光 
标定 位 在 需 添加 文本 的 位 置 ,直接 输入 文本 即 可 。 


2. 复制 文本 
在 制作 网 页 过 程 中 ,使 用 复制 文本 的 方法 可 节省 输入 文本 的 时 间 , 从 而 提高 制作 网 页 


的 速度 。 将 文本 复制 到 Dreamweaver 8. 0 中 的 方法 是 : 先 选择 要 复制 的 文本 ,再 执行 “ 编 
辑 ” 一 “复制 "命令 或 按 Ctrl 十 C 键 进行 原文 本 的 复制 ,然后 切换 到 Dreamweaver 8.0 中 ， 
将 鼠标 定位 在 需 添加 文本 的 位 置 ,再 选择 “编辑 ”粘贴 ?命令 或 按 Ctrl 十 V 键 进行 粘贴 
即 可 。 


3. 导入 文本 


在 Dreamweaver 8.0 中 ,除了 可 以 复制 文本 以 外 ,还 可 以 直接 导入 XML 模板 、 表 格 
式 数 据 、Word 及 Excel 格式 的 文档 。 在 Dreamweaver 8. 0 中 导入 文本 的 方法 非常 简单 ， 
只 需要 执行 “文件 ”一 “导入 ”命令 中 的 子 命令 ,在 弹出 的 对 话 框 中 选择 需要 导入 的 文档 
即 可 。 


7.1.2 添加 特殊 文本 


1. 插入 特殊 符号 


特殊 符号 一 般 不 能 从 键盘 直接 输入 ,而 在 制作 网 页 时 ,又 常常 需要 插入 一 些 特殊 字 
符 , 比 如 (版 权 ) 、@@( 注 册 商 标 ) 、™( 商 标 ) 、 砂 (英镑 符号 )、 半 ( 日 元 符号 ) .二 (欧元 符号 ) 
等 特殊 的 字母 。 

下 面 以 插入 版 权 符 号 “©O” 为 例 ,说 明 在 Dreamweaver 8.0 中 如 何 插入 特殊 字符 。 首 
先 在 打开 的 编辑 窗口 中 ,将 鼠标 定位 在 需 插 入 特殊 符号 的 位 置 ,然后 执行 “插入 ”一 
HTMIL 一 “特殊 字符 ”一 “版 权 ” 命 令 , 即 可 插入 版 权 符号 ,如 图 7-1 所 示 。 


区 Et 因 修改 0D 文本 (I) 命令 (C) 站 点 (8) 窗口 @) 帮助 (B) 
标签 人 C)... CtrltE 
图 像 (1) Ctrl+Alt+I 
图 像 对 象 (CC) wy 
媒体 0D 
表格 (T) Ctrl+ALt+T 
表格 对 象 (&) 
布局 对 象 (Y) 
表单 (E) 


超级 链接 (P) 换行 符 @) ShifttEnter 
电子 地 件 链接 (L) 不 换行 空格 区) 。 Ctrl+Shift+Space 


命名 淇 记 () Ctrl+Alt+tA 和 
Ee a (R) 


注释 (C) 


对 目 元 符 导 () 
模板 对 象 (0) * 框架 (8) 出 
最 近 的 代码 片断 (R) 外 


自 定义 收藏 夹 (UD). .. 
获取 更 多 对 象 (C). 


图 7-1 插入 特殊 字符 


2. 插入 空格 


在 Dreamweaver 8. 0 中 会 出 现 无 论 按 多 少 次 空格 键 都 只 会 出 现 一 个 空格 的 情况 ,出 
现 这 种 情况 的 原因 是 Dreamweaver 8. 0 的 文档 格式 都 是 以 HTML 形式 存在 的 ,而 
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HTML 文档 只 允许 字符 之 间 包 含 一 个 空格 。 那 么 如 果 要 在 文档 中 输入 多 个 空格 时 ,可 以 
连续 按 Shift 十 Ctrl 十 空格 组 合 键 或 者 单 击 插入 工具 栏 中 的 “文本 ”选项 卡 中 的 不 换行 空格 
按钮 出 。 


3. 插入 水 平 线 


水 平 线 可 以 分 隔 页 面 内 容 , 使 得 页 面 元 素 相互 区 分 开 来 。 要 在 页 面 文档 中 插入 水 平 
线 的 方法 是 : 将 鼠标 定位 到 要 插 和 人 水平线 的 位 置 ,执行 “插入 ”一 HTML 一 水平线 "命令 
或 单 击 插入 工具 栏 中 的 HTML 选项 卡 中 的 水 平 线 按钮 雯 , 即 可 在 页 面 中 插入 一 条 水 
平 线 。 

如 果 要 修改 水 平 线 , 可 以 先 选中 水 平 线 , 然 后 在 “属性 ”面板 中 对 水 平 线 的 宽度 、 对 齐 
方式 和 颜色 进行 设置 ,如 图 7-2 所 示 。 其 中 各 选项 的 含义 如 下 所 述 。 


图 7-2 ”水平线 “属性 ?面板 


(1) 水 平 线 下 的 文本 框 : 用 来 定义 水 平 线 的 名 称 , 即 ID。 

(2) 宽 和 高 : 用 来 设置 水 平 线 的 宽度 和 高 度 , 其 中 的 宽 有 两 种 设置 方法 。 一 种 是 在 
文本 框 中 直接 输入 像素 值 ; 另 一 种 是 输入 水 平 线 所 占 窗 口 的 百分比 值 , 当 输 入 百分比 为 
100% 时 ,水 平 线 会 随 着 窗口 的 宽度 自动 调整 。 

(3) 对 齐 : 用 来 指定 水 平 线 的 对 齐 方式 。 

(4) 类 : 用 来 指定 样式 。 

(5) 阴影 : 选中 该 复 选 框 可 以 为 水 平 线 添加 阴影 。 

小 技巧 : 如 何 设置 水 平 线 的 颜色 呢 ? 

在 水 平 线 的 “属性 ”面板 中 没有 对 颜色 的 直接 设置 选项 ,但 是 可 以 单 击 “属性 ”面板 中 
的 快速 标签 编辑 器 国 , 为 水 平 线 标记 添加 color 属性 。 


4. 插入 时 间 和 日 期 


在 Internet 上 经 常 可 以 看 到 网 页 上 有 一 个 最 新 更 新 日 期 ,用 来 告诉 用 户 页 面 上 一 次 
更 新 是 什么 时 候 , 当 页 面 被 重新 修改 时 ,时 间 标 记 


会 随 之 自动 改变 。 插 入 方法 为 执行 “插入” 一 “日 EE 
期 "命令 或 利用 插入 工具 栏 中 的 “常用 ”选项 卡 中 的 ee 
日 期 图 标 按钮 羡 , 在 弹出 的 “插入 日 期 "对 话 框 中 先 Wt 
择 所 需要 的 时 间 格式 ,如 图 7-3 所 示 。 rN 


该 对 话 框 中 的 各 选项 的 含义 如 下 所 述 。 人 


(1) 星期 格式 : 在 该 项 的 下 拉 列 表 中 可 以 选 
择 中 文 或 英文 的 星期 格式 ,也 可 以 选择 不 要 星期 。 图 7-3 “ 插 人 日 期 "对 话 杠 
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(2) 日 期 格式 : 在 该 选项 框 中 选择 要 插入 的 日 期 格式 。 

(3) 时 间 格 式 : 在 该 项 的 下 拉 列 表 中 选择 时 间 格 式 或 者 不 要 时 间 。 

(4) 储存 时 自动 更 新 : 如 果 希 望 在 每 次 保存 文档 时 都 更 新 插入 的 时 间 , 就 选择 此 项 。 
如 果 希 望 日 期 在 插入 后 变 成 纯 文本 并 永远 不 自动 更 新 ,就 取消 选择 此 项 。 


5. 插入 上 标 和 脚 标 


在 网 页 中 输入 文本 时 ,如 果 遇 到 数 的 乘 方 格式 ,如 10: ,或 者 是 化 学 元 素 符号 , 如 
NO; ,该 如 何 输入 呢 ? 我 们 可 以 利用 添加 标记 过 sup 之 … 扫 /sup 之 (上 标 ) 或 过 sub 之 … 
到 /sub> 之 (下 标 ) 的 方法 来 完成 。 

【实例 7-1】 以 输入 10? 为 例 , 说 明 如 何在 Dreamweaver 8.0 中 插入 上 标 。 

(1) 新 建 一 个 网 页 ,在 网 页 中 输入 102 。 

(2) 选中 数字 “2” 后 , 单 击 编 辑 窗 口 左 上 角 文 档 工具 栏 中 的 显示 代码 视图 和 设计 视图 
按钮 国 N,Dreamweaver 8. 0 编辑 窗口 被 拆 分 为 “代码 ”和 "设计 ?两 部 分 ,如 图 7-4 所 示 。 


图 7-4 拆 分 窗口 


(3) 在 “代码 ”视图 中 找到 数字 2 ,在 其 前 后 分 别 输入 二 sup 之 和 志 /sup 之 标记 。 单 击 
编辑 窗口 后 ,会 发 现 原来 输入 的 102 变 成 了 10: ,如 图 7-5 所 示 。 
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7-5 设置 上 标 
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7.1.3 插入 文 本 列表 


在 网 页 中 插入 文本 列表 可 以 使 内 容 更 加 明朗 直观 。Dreamweaver 8. 0 中 有 两 种 类 型 
的 列表 : 编号 列表 和 项 目 列表 。 


1. 插入 编号 列表 


编号 列表 是 以 数字 编号 开头 ,一般 列 表 项 目 都 是 有 明确 的 先后 顺序 ,所 以 又 称 为 有 序 
列表 , 它 可 以 用 在 作息 时 间 表 工作 进度 表 书籍 大 纲目 录 等 实际 应 用 中 。 

在 Dreamweaver 8.0 中 ,可 以 将 已 有 的 段落 文本 创建 编号 列表 ,具体 操作 为 : 首先 在 
打开 的 编辑 窗口 中 ,选择 要 创建 编号 列表 的 所 有 段落 文本 ,然后 在 “属性 ”面板 中 单 击 “ 编 
号 列表 ”按钮 径 。 也 可 以 在 输入 时 手动 添加 编号 列表 ,其 方法 为 单 击 “ 编 辑 列表 ”按钮 汉 ， 
然后 输入 内 容 即 可 。 如 图 7-6 所 示 为 在 网 页 中 插入 编号 列表 的 效果 。 


2. 插入 项 目 列表 


项 目 列表 是 以 项 目 符号 开头 ,在 列表 项 之 间 没 有 先后 次 序 时 使 用 ,所 以 又 称 为 无 序列 
表 , 它 可 以 用 于 一 个 政府 或 公司 的 组 织 分 布 图 ,也 可 用 于 百货 商店 的 商品 列表 ,还 可 用 于 
学 习 科 目 上 的 分 类 等 。 

在 Dreamweaver 8.0 中 ,同样 也 可 以 将 已 有 的 段落 文本 创建 项 目 列表 ,其 方法 和 创建 
编号 列表 相同 。 首 先 选择 要 创建 项 目 列表 的 文本 ,然后 在 “属性 ”面板 中 单 击 “ 项 目 列表 ” 
按钮 踊 即 可 自动 创建 项 目 列表 。 也 可 以 在 输入 时 创建 项 目 列表 ,其 方法 是 将 鼠标 定位 在 
需 插入 项 目 列表 的 位 置 , 在 “属性 ”面板 中 单 击 “ 项 目 列表 ”按钮 ,Dreamweaver 8.0 自动 添 
加 前 导 字 符 , 并 进入 项 目 编 号 创建 状态 。 如 图 7-7 所 示 为 在 网 页 中 插入 项 目 列表 的 效果 。 


遇 Untitled-1 ee 上 - OIX| 此 Untitled-1 en [器 XX 


图 7-6 插入 编号 列表 图 7-7 插入 项 目 列表 


3. 设置 文本 列表 的 编号 形式 


在 创建 列表 时 ,可 以 根据 自己 的 需要 对 文本 列表 的 编号 形式 进行 编辑 ,如 将 编号 列表 
的 起 始 序号 变 为 “0? 或 将 项 目 列表 的 前 导 符号 设置 为 正方 形 等 。 在 Dreamweaver 8. 0 中 
主要 是 通过 “列表 属性 ”对 话 框 对 文本 列表 的 编号 形式 进行 设置 ,如 图 7-8 所 示 。 打 开 “ 列 
表 属 性 ”对 话 框 的 方法 也 很 简单 ,选中 列表 项 后 单 击 “ 属 性 ”面板 中 的 “列表 项 目 ” 按 钮 即 可 
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打开 该 对 话 框 。 


列表 类 型 (T) : FEE 加 
样式 (8): 
到 


列表 项 目 
新 建 样式 (1) : 


重 设 计数 (R): 


图 7-8 “列表 属性 ”对 话 框 


下 面 对 “ 列 表 属 性 ”对 话 框 中 各 个 选项 的 作用 进行 说 明 。 

(1)“ 列 表 类 型 "下 拉 列 表 框 : 用 来 选择 列表 类 型 的 样式 。 

(2)“ 样 式 ” 下 拉 列 表 框 : 用 来 选择 列表 的 前 导 符 样 式 。 

(3)“ 开 始 计数 "文本 框 : 用 来 选择 第 一 项 编号 列表 的 起 始 编号 。 


7.1.4 设置 文本 样式 


在 页 面 中 输入 文本 后 ,为 了 使 输入 的 文本 更 加 美观 ,用 户 可 以 设置 文本 的 格式 ,通过 
设置 文本 的 格式 使 文本 的 字体 、 颜 色 及 段落 样式 发 生变 化 ,从 而 使 网 页 更 具 魅 力 。 在 
Dreamweaver 8.0 中 ,文本 的 属性 一 般 都 是 在 “属性 ?面板 中 设置 的 ,如 图 7-9 所 示 。 


无 国 ”样式 无 国 Ccss ]BzEE 委 当时 链接 
队 认 了 体 国 ”大 小 无 ” 国 | 加 国画 | ] 王 和 要 要 目标 


列表 项 目 ..，]】 


图 7-9 文本 “属性 ”面板 


1. 设置 标题 格式 


网 页 中 默认 存在 6 种 标题 ,它们 依次 为 标题 1 .标题 2. 标 题 3 标题 4、 标 题 5 和 标题 
6。 使 用 这 些 标题 ,可 以 标注 文本 内 容 的 不 同 层次 。 = 
设置 标题 格式 的 主要 方法 是 使 用 “属性 ”面板 的 “ 格 ” 隐 nau | 
式 "下 拉 列 表 ,在 下 拉 列 表 中 选择 相应 级 别 的 标题 即 | 1. 我 们 一 起 来 学 习 
可 。 如 图 7-10 所 示 , 在 文档 中 分 别 为 文本 应 用 了 6 | 2. 我 们 一 起 来 学 习 


个 级 别 标题 时 的 效果 。 站 3. 我 们 一 起 来 学 习 
由 4. 我 们 一 起 来 学 习 
2. 设置 段落 格式 5 我 们 起来 学习 


| san 一直 二 学 习 1 


在 网 页 中 设置 段落 的 方法 与 设置 标题 的 方法 类 
似 , 即 在 * 属 性 "面板 的 "格式 "下 拉 列 表 中 选择 "段落 " Br 
即 可 。 设 置 文本 段落 主要 包括 段落 缩 进 方式 和 对 齐 。 ”图 7-10 应 用 标题 效果 
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方式 等 。 

1) 设置 段落 缩 进 

设置 段落 缩 进 包括 增加 段落 的 缩 进 和 减少 段落 的 缩 进 两 种 。 将 鼠标 定位 在 需要 设置 
格式 的 段落 中 ,在 “属性 ”面板 中 单 击 “ 文 本 缩 进 ” 按 钮 玻 , 将 增加 段落 的 缩 进 , 单 击 “ 文 本 凸 
出 ”按钮 王将 减少 段落 的 缩 进 ,再 次 单 击 可 取消 相应 的 缩 进 设置 。 

2) 设置 对 齐 方式 

为 了 使 网 页 更 美观 ,常常 需要 对 文本 进行 对 齐 操作 。 在 Dreamweaver 8.0 中 ,提供 了 
4 种 对 齐 方式 : 左 对 齐 重 .居中 对 齐 重 , 右 对 齐 生 和 两 端 对 齐 量 ,如 图 7-11 所 示 。 设 置 文 
本 对 齐 的 方法 是 : 将 鼠标 定位 在 需要 设置 对 齐 方式 的 段落 中 ,再 单 击 * 属 性 ?面板 中 的 对 
齐 按钮 , 即 可 设置 相应 的 对 齐 。 


3. 设置 文本 字号 


在 Dreamweaver 8.0 中 ,字体 大 小 的 设置 是 通过 “属性 ”面板 中 的 “大 小 ”选项 来 完成 
的 。 字 体 大 小 的 设置 主要 有 以 下 两 种 方法 : 一 种 是 使 用 具体 值 的 方法 ,也 就 是 直接 输入 
字体 的 大 小 ,如 12px 或 12pt; 另 一 种 是 用 一 定 的 范围 或 相对 值 来 确定 ,如 “ 较 大 ”选项 表 
示 在 原 字 号 的 基础 上 更 大 一 点 ,而 “中 ”选项 则 表示 介 于 12 一 14px 之 间 的 字号 。 

在 实际 操作 中 一 般 使 用 具体 值 的 表示 方式 来 设置 字体 的 大 小 。 另 外 ,字体 的 度量 单 
位 较 多 ,相同 的 数值 ,不同 的 度量 单位 所 得 到 的 字体 大 小 是 不 一 样 的 ,常用 的 度量 单位 有 
“像素 (px)” 及 “点数 (pt) ”两 种 。 在 Dreamweaver 8. 0 中 默认 正文 文本 通常 设置 为 12px 
或 9pt。 


4. 设置 文本 字体 


在 Dreamweaver 8.0 中 设置 字体 的 方法 是 : 选择 需要 设置 字体 的 文本 ,在 “属性 ” 面 
板 的 “字体 ”下 拉 列 表 框 中 选择 需要 的 字体 即 可 ,如 图 7-12 所 示 。 


Arial, Helvetica, sans-serif 


图 7-11 对齐 文本 图 7-12 “字体 ”下 拉 列 表 


在 默认 情况 下 ,“ 字 体 ” 下 拉 列 表 框 中 可 供 选 择 的 字体 非常 少 , 不 能 满足 大 多 数 网 页 文 
本 的 编辑 要 求 , 这 时 可 以 在 “字体 ”下 拉 列 表 框 中 选择 “编辑 字体 列表 ”选项 ,在 打开 的 “ 编 
辑 字 体 列 表 ” 对 话 框 中 添加 字体 ,如 图 7-13 所 示 。 
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品 
国 回 


区 ,Courier, nonospace 

Georgia, Tines New Ronan, Tines, serif 

Verdana, Arial, Helvetica, sans-serif 
ial, Helvetica, sans-seri 


| 


选择 的 字体 : 


图 7-13 “编辑 字体 列表 ”对 话 框 


5. 设置 文本 颜色 


在 Dreamweaver 8.0 中 ,除了 可 以 对 网 页 中 的 文本 进行 字体 和 大 小 的 设置 外 ,还 可 对 
文本 的 颜色 进行 设置 。 文 本 颜色 的 设置 方法 是 : 选择 需要 设置 颜 
色 的 文本 ,在 其 “属性 ”面板 中 单 击 国 | 按钮 ,在 弹出 的 颜色 列表 中 选 
择 需要 的 颜色 即 可 ,如 图 7-14 所 示 。 

用 户 还 可 以 单 击 “ 属 性 ”面板 中 的 “页 面 属性 ”按钮 ,打开 “页 面 
属性 ”对 话 框 ,如 图 7-15 所 示 。 在 外观” 分 类 中 的 “文本 颜色 "中选 ”图 7-14 调 色 板 
择 需 要 的 颜色 也 可 以 完成 设置 文本 颜色 。 


页 面 属性 


: 
i 可 


:[ ”|| 父 素 px) ”~| 右边 中 人 @):| | [像素 6z) ~ 
[ 傈 素 (px) ~| 下 边 耻 GO) : [| 


确定 取消 应 用 (8&) 帮助 


图 7-15 “页 面 属 性 ”对 话 框 


7.2 添加 图 像 


在 制作 网 页 的 过 程 中 ,为 了 使 制作 的 网 页 更 加 美观 ,更 能 吸引 浏览 者 的 目光 ,可 以 在 
网 页 中 插入 漂亮 的 图 片 。 在 网 页 中 插入 图 片 不 仅 能 起 到 美化 页 面 的 作用 ,而 且 图 片 能 更 
加 直观 地 表现 网 页 的 内 容 。 在 网 页 中 的 图 像 一 般 有 两 种 存在 方式 ,一 是 作为 网 页 的 内 容 ， 
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二 是 作为 网 页 或 其 他 对 象 的 背景 。 
7.2.1 常用 图 像 格 式 


目前 ,用 于 网 页 和 网 络 传输 的 主要 图 像 格式 主要 有 GIF JPG 和 PNG 三 种 ,它们 的 主 
要 特点 可 以 归纳 为 : 采用 了 特定 的 数据 压缩 技术 ,文件 体积 小 ,可 以 跨 平台 使 用 ,获得 了 
大 部 分 网 络 浏览 器 的 支持 。 


1. GIF 图 像 格式 


GIF 是 Graphics Interchange Format( 图 形 交 换 格式 ) 的 缩写 。 格 式 的 特点 是 压缩 比 
高 ,磁盘 空间 占用 较 小 。 因 为 当前 网 络 传输 带宽 的 限制 ,这 种 GIF 图 像 文 件 短小 ,下 载 速 
度 快 ,被 广泛 地 应 用 到 网 页 中 。 

但 是 GIF 格式 最 多 只 能 储存 256 色 , 所 以 通常 只 能 用 来 显示 简单 图 形 及 字体 。 如 果 
图 像 颜色 比较 丰富 ,使 用 GIF 格式 会 使 图 像 颜色 丢失 。 


2. JPEG 图 像 格式 


JPEG 是 Joint Photographic Experts Group( 联 合 图 像 专 家 组 ) 的 缩写 。JPEG 图 像 
格式 可 支持 24 位 真 彩色 , 它 精确 地 记录 每 一 个 像素 的 亮度 ,利用 一 种 失真 式 的 图 像 压 缩 
方式 将 图 像 压 缩 在 很 小 的 储存 空间 中 ,因此 很 适合 应 用 于 网 页 中 的 图 像 。 


3. PNG 图 像 格式 


PNG 是 Portable Network Graphics( 流 式 网 络 图 形 ) 的 缩写 ,是 一 种 新 兴 的 网 络 图 像 
格式 。PNG 是 目前 保证 最 不 失真 的 格式 , 它 汲取 了 GIF 和 JPG 二 者 的 优点 ,存储 形式 丰 
富 , 兼 有 GIF 和 JPEG 的 色彩 模式 ; 它 的 另 一 个 特点 是 能 把 图 像 文 件 压缩 到 极限 ,以 利于 
网 络 传输 ,但 又 能 保留 所 有 与 图 像 品质 有 关 的 信息 ,因为 PNG 是 采用 无 损 压 缩 方式 来 减 
少 文 件 的 大 小 ,这 一 点 与 牺牲 图 像 品 质 以 换取 高 压缩 率 的 JPEG 有 所 不 同 ; 它 的 第 三 个 特 
点 是 显示 速度 很 快 ,只 需 下 载 1/64 的 图 像 信息 就 可 以 显示 出 低 分 辩 率 的 预览 图 像 ; 第 四 ， 
PNG 同样 支持 透明 图 像 的 制作 ,透明 图 像 在 制作 网 页 图 像 的 时 候 很 有 用 ,可 以 把 图 像 背 
景 设 为 透明 ,用 网 页 本 身 的 颜色 信息 来 代替 设 为 透明 的 色彩 ,这 样 可 让 图 像 和 网 页 背景 很 
和 谐 地 融合 在 一 起 。 

PNG 的 缺点 是 不 支持 动画 应 用 效果 ,如 果 在 这 方面 能 有 所 加 强 , 简 直 就 可 以 完全 替 
代 GIF 和 JPEG 了 。 


7.2.2 插 人 图 像 


在 Dreamweaver 8. 0 中 插入 图 像 的 方法 主要 有 直接 插入 图 像 和 用 占 位 符 插入 图 像 两 
种 方法 。 
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1. 直接 插入 图 像 


直接 插入 图 像 就 是 将 图 像 直 接 插 入 到 网 页 中 , 它 是 网 页 中 最 常用 的 图 像 插入 方式 ,在 
插入 图 像 时 通常 将 要 插入 的 图 像 事 先 保存 在 站 点 的 某 文件 夹 ( 如 images) 中 ,再 在 
Dreamweaver 8. 0 中 插入 图 像 。 其 操作 方法 是 : 首先 将 鼠标 定位 在 需要 插入 图 像 的 位 
置 ,然后 执行 插入” 图像” 命令 ,弹出 “选择 图 像 源 文件 ?对 话 框 , 如 图 7-16 所 示 , 在 对 
话 框 中 选择 好 相应 的 图 像 文 件 , 单 击 * 确 定 ” 按 钮 后 , 即 完成 图 像 的 插入 。 
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回 预 览 图像 


图 7-16 “选择 图 像 源 文件 ?对话 杠 


说 明 : 一 般 来 说 ,图 像 应 从 本 地 站 点 内 部 选择 ,但 如 果 要 选择 的 图 像 不 在 站 点 目录 
内 ,在 插入 图 片 后 ,系统 会 询问 是 否 将 图 片 复制 到 站 点 文件 夹 中 ,如 图 7-17 所 示 。 此 时 应 
当选 择 “ 是 ”, 和 否则 网 页 被 上 传 到 服务 器 后 ,不 会 显示 出 来 。 一 般 将 图 像 文 件 保存 在 站 点 目 
录 的 图 像 文件 夹 中 ,有 利于 管理 与 维护 。 


2. 用 占 位 符 插入 图 像 


在 网 页 制作 过 程 中 ,如 果 还 没 想 好 要 插入 什么 图 像 时 ,可 以 插入 图 像 占 位 符 来 解决 这 
个 问题 。 图 像 占 位 符 在 网 页 中 只 占据 一 个 位 置 , 当 确定 插入 的 图 像 后 再 使 用 图 像 占 位 符 
将 图 像 插 入 。 其 操作 方法 是 : 首先 将 鼠标 定位 在 要 插入 图 像 的 位 置 , 然 后 执行 “插入 ”一 
“图 像 对 象 "一 "图像 占 位 符 ” 命 令 ,打开 ”图 像 占 位 符 ” 对 话 框 , 如 图 7-18 所 示 。 在 对 话 框 
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图 7-17 提示 信息 图 7-18 “图 像 占 位 符 ” 对 话 框 
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中 设置 图 像 占 位 符 的 “名 称 ”“ 宽 度 ” 等 属性 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 网 页 文档 中 插入 占 位 
符 , 如 图 7-19 所 示 。 双 击 图 像 占 位 符 , 即 可 打开 “选择 图 像 源 文件 ”对 话 框 进行 图 像 插 入 。 


晤 Untitled-1 (XHTIL)# [Xl 
m! ,FPP :PP FP ,PPP ,TPP 二, 和 


插入 鼠标 经 过 图 像 


图 7-19 插入 占 位 符 图 像 图 7-20 “插入 鼠标 经 过 图 像 ” 对 话 杠 


7.2.3 创建 鼠标 经 过 图 像 


鼠标 经 过 图 像 是 一 种 动态 图 像 效果 , 它 由 原始 图 像 和 替换 图 像 两 部 分 组 成 。 在 浏览 
器 中 浏览 网 页 时 , 当 鼠 标 指 针 移 动 到 原始 图 像 上 时 将 显示 蔡 换 图 像 ,鼠标 移出 图 像 范围 时 
将 显示 原始 图 像 ,就 像 会 动 的 按钮 , 既 动感 又 时 尚 。 在 创建 鼠标 经 过 图 像 之 前 ,需要 先 准 
备 两 幅 图 像 ( 原 始 图 像 和 替换 图 像 ), 且 两 幅 图 像 大 小 相同 , 当 图 像 大 小 不 一 致 时 ， 
Dreamweaver 8.0 将 自动 把 图 像 大 小 调整 为 一 致 。 

创建 鼠标 经 过 图 像 的 具体 操作 步骤 如 下 : 

(1) 将 鼠标 定位 在 需要 创建 鼠标 经 过 图 像 的 位 置 。 

(2) 执行 "插入 "一 “图像 对 象 ”鼠标 经 过 图 像 ” 命 令 , 打 开 * 插 入 鼠标 经 过 图 像 ” 对 
话 框 ,如 图 7-20 所 示 。 

(3) 在 “图 像 名 称 ” 文 本 框 中 输入 图 像 的 名 称 ,也 可 直接 使 用 默认 名 称 , 即 Imagel 。 

(4) 单 击 “ 原 始 图 像 ” 右 侧 的 “浏览 ”按钮 ,打开 “原始 图 像 * 对 话 框 ,从 中 选择 一 幅 图 
片 , 如 图 7-21 所 示 。 单 击 “ 确 认 ” 按 钮 ,返回 到 “插入 鼠标 经 过 图 像 ” 对 话 框 。 
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图 7-21 选择 原始 图 像 
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(5) 单 击 “ 鼠 标 经 过 图 像 "文本 框 右 侧 的 “浏览 "按钮 ,打开 “鼠标 经 过 图 像 ” 对 话 框 , 从 
中 选择 一 幅 图 片 , 如 图 7-22 所 示 。 单 击 “ 确 认 ” 按 钮 ,返回 到 “插入 鼠标 经 过 图 像 ” 对 话 框 。 
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图 7-22 选择 替换 图 像 


190 x 178 JPEC, 6E/1 


(6) 选中 * 预 载 鼠 标 经 过 图 像 ” 复 选 框 ,可 使 Dreamweaver 将 图 像 预 载 人 浏览 器 缓冲 
区 中 ,在 “替换 文本 ”文本 框 中 可 以 设置 交互 文本 ,在 “ 按 下 时 ,前 往 的 URL” 文 本 框 中 可 以 


设置 链接 地 址 。 


(7) 单 击 “ 确 定 ” 按 钮 , 即 可 插入 鼠标 经 过 图 像 。 在 浏览 器 中 预览 时 ,将 鼠标 放 在 或 移 
开 图 片 时 ,会 显示 不 同 的 图 像 ,如 图 7-23 所 示 。 
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7.2.4 创建 网 站 相册 
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图 7-23 和 鼠标 经 过 图 像 


网 站 相册 就 是 在 一 个 页 面 中 显示 大 量 图 片 的 缩 略 图 , 当 用 户 单 击 该 缩 略 图 时 ,将 打开 
一 个 网 页 并 显示 该 图 片 。 以 往 创 建 网 站 相册 时 需要 在 图 像 处 理 软件 中 为 每 张 图 片 制作 一 
张 缩 略图 并 在 网 页 中 插入 这 些 缩 略图 ,然后 制作 显示 放大 后 的 图 片 网 页 ,整个 过 程 非常 复 
杂 。 而 使 用 Dreamweaver 8.0 的 创建 网 站 相册 功能 ,只 需要 一 个 简单 的 操作 ,就 可 以 完成 
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以 上 的 功能 。 

要 在 Dreamweaver 8.0 中 创建 网 站 相册 ,需要 先 安装 Fireworks 4. 0( 或 更 高 版 本 ) 软 
件 ,并 准备 相同 大 小 的 大 图 片 ( 即 放大 后 的 图 像 ) ,而 缩 略 图 是 Dreamweaver 自动 调用 
Fireworks 软件 制作 的 图 形 。 

创建 网 站 相册 的 具体 操作 步骤 如 下 : 

(1) 新 建 一 个 名 称 为 picture 的 文件 夹 ,将 准备 要 生成 网 站 相册 的 图 片 放 到 该 文件 夹 
中 。 再 新 建 一 个 名 称 为 photo 的 文件 夹 , 用 来 放置 生成 相册 后 的 照片 和 网 页 文件 ,这 两 个 
文件 夹 可 以 在 不 同 的 目录 下 。 

(2) 在 Dreamweaver 文档 窗口 中 ,执行 “命令 ”>“ 创 建 网 站 相册 ”命令 ,打开 “创建 网 
站 相册 ”对 话 框 ,如 图 7-24 所 示 。 


创建 网 站 相册 
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图 7-24 “创建 网 站 相册 ”对 话 框 


(3) 在 “相册 标题 "文本 框 中 输入 一 个 标题 。 该 标题 将 显示 在 包含 缩 略 图 的 页 面 的 顶 
部 的 灰色 和 矩形 中 。 该 项 是 必 填 项 。 根据 需要 还 可 以 在 “ 副 标 信息 ”和 “其 他 信息 ”中 输入 最 
多 两 行 的 附加 文本 ,该 文本 将 直接 在 标题 下 显示 ,该 项 是 可 选项 。 

(4) 在 “* 源 图 像 文件 夹 "文本 框 中 输入 源 图 像 路 径 或 者 单 击 文本 框 后 的 “浏览 ?按钮 ， 
会 弹出 * 请 选择 一 个 文件 夹 ? 对 话 框 ,此 时 选择 步骤 (1) 中 创建 的 picture 文件 夹 。 然 后 单 
击 * 目 标 文件 夹 "文本 框 旁 的 “浏览 "按钮 ,选择 目标 文件 夹 , 即 步骤 (1) 中 创建 的 photo 文 
件 夹 。 这 两 个 选项 为 必 填 项 。 

(5) 接着 还 可 以 对 缩 略图 的 大 小 .是 否 需 要 在 相册 中 显示 每 张 图 片 的 文件 名 称 、 每 行 
显示 几 幅 图 片 以 及 是 否 为 每 张 相片 建立 导 览 页 面 进 行 设置 。 

(6) 设置 完毕 后 , 单 击 “确定 ”按钮 ,就 会 自动 启动 Fireworks 优化 图 像 ,优化 完成 后 ， 
Dreamweaver 将 会 提示 创建 网 站 相册 完毕 。 

说 明 : 在 浏览 器 中 预览 该 相册 时 ,可 以 单 击 缩 略 图 打开 图 片 的 原始 图 像 , 并 且 可 以 使 
用 导 览 页 面 提 供 的 链接 快捷 的 进行 上 一 张 和 下 一 张 图 片 的 预览 ,以 及 返回 相册 的 缩 略 图 
首页 ,如 图 7-25 所 示 。 


7.2.5 添加 背景 图 像 


在 网 页 中 ,可 以 把 图 像 设 置 为 网 页 的 背景 ,背景 图 就 是 网 页 的 "桌面 ,挑选 的 背景 图 
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要 能 体现 出 网 站 的 整体 风格 和 特色 ,与 网 页 内 容 要 和 谐 统 一 。 一 般 而 言 , 背 景 图 像 的 颜色 
与 前 景 文字 的 颜色 要 有 一 个 较 强 的 对 比 。 例 如 ,背景 图 的 颜色 为 淡色 调 , 则 前 景 文字 或 图 
形 要 以 深 色 显 示 ; 反 之 , 若 背景 使 用 较 深 的 色调 , 则 前 景 文字 就 需要 使 用 较 浅 且 较 亮 的 
色调 。 

如 果 要 为 网 页 添加 背景 图 像 , 可 以 执行 “修改 ”>“ 页 面 属性 ”命令 或 者 在 “属性 ”面板 
中 单 击 页 面 属性 按钮 已 ERE ,打开 “页 面 属性 ”对 话 框 ,如 图 7-26 所 示 。 
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图 7-26 “页 面 属性 ”对 话 框 


在 “分 类 ” 卡 中 选中 “外 观 ” 选 项 ,可 以 在 “背景 图 像 * 文 本 框 中 输入 要 设 为 背景 的 图 像 
路 径 , 或 者 单 击 “ 浏 览 ” 按 钮 ,在 弹出 的 “选择 图 像 源 文件 ”对 话 框 中 选择 要 作为 背景 的 图 
像 ,并 且 在 “重复 ”项 的 下 拉 列 表 中 选择 图 像 在 网 页 中 的 平 铺 方式 。 设置 完成 后 , 单 击 “ 确 
定 ” 按 钮 ,就 可 以 在 网 页 中 看 到 所 设置 的 背景 。 
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7.2.6 设置 图 像 属性 


在 网 页 中 插入 图 像 后 ,有 时 还 需要 对 图 像 进行 设置 ,如 设置 图 像 大 小 、 源 文件 位 置 、 链 
接 和 对 齐 方式 等 。 选 择 要 设置 属性 的 图 像 后 ,在 如 图 7-27 所 示 的 “属性 ”面板 中 即 可 设置 
图 像 属性 。 
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图 7-27 图 像 * 属 性 ”面板 


类 (C) 


1. 命名 图 像 名 称 
在 “属性 ?面板 的 “图 像 "文本 框 中 可 以 命名 或 重 命名 图 像 。 
2. 添加 替换 文本 


在 浏览 网 页 时 ,为 了 显示 图 像 说 明 , 可 以 在 “替换 ”下 拉 列 表 框 中 输入 图 像 说 明 。 这 样 
当 和 鼠标 移动 到 该 图 像 上 或 当 图 片 在 网 页 中 无 法 显示 时 ,会 在 图 像 所 在 位 置 显示 该 图 像 的 
说 明 。 其 效果 如 图 7-28 所 示 。 


因 华 果 


图 7-28 显示 替换 文本 


3. 设置 图 像 的 对 齐 方式 


通常 情况 下 ,图 片 是 和 文本 排列 在 一 起 的 ,所 以 图 片 的 对 齐 方式 是 根据 文本 的 相对 位 
置 进 行 划分 的 。 在 属性 面板 中 的 “对 齐 * 下 拉 列 表 框 中 可 以 选择 对 齐 方式 ,其 中 各 项 的 含 
义 如 下 所 述 。 

(1) 默认 值 : 使 用 浏览 器 的 默认 对 齐 方式 。 

(2) 基线 : 与 默认 值 相同 。 

(3) 顶端 : 将 文本 行 中 最 高 字母 的 顶端 与 图 像 对 齐 , 如 图 7-29(a) 所 示 。 

(4) 文本 上 方 : 将 文本 行 的 最 高 字母 和 图 像 对 齐 , 如 图 7-29(b) 所 示 。 

(5) 居中 : 将 文本 行 的 基线 和 图 像 的 中 间 对 齐 ,如 图 7-29(c) 所 示 。 
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(6) 绝对 居中 : 将 图 像 的 中 间 与 文本 行 的 中 间 对 齐 , 如 图 7-29(d) 所 示 。 

(7) 底部 : 将 文本 行 的 基线 与 图 像 的 底部 对 齐 , 如 图 7-29(e) 所 示 。 

(8) 绝对 底部 : 将 文本 行 中 字母 最 底 端 的 部 位 与 图 像 对 齐 , 如 图 7-29(f) 所 示 。 
(9) 左 对 齐 : 图 像 位 于 页 面 左 侧 , 文 字 位 于 页 面 右 侧 。 

(10) 右 对 齐 : 图 像 位 于 页 面 右 侧 ,文字 位 于 页 面 左 侧 。 
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图 7-29 几 种 不 同 的 图 片 对 齐 方式 


4. 设置 边 距 

在 “属性 ?面板 的 “垂直 边 距 ?和 ”水平 边 距 ? 文 本 框 中 可 以 设置 图 像 与 文本 的 边 距 。 
“垂直 边 距 ? 通 常用 于 设置 图 像 项 部 和 底部 与 文本 之 间 的 距离 :水平 边 距 ” 通 常用 于 设置 
图 像 左 侧 和 右 侧 与 文本 之 间 的 距离 。 


5. 改变 图 像 大 小 


改变 图 像 大 小 的 方法 有 两 种 : 一 是 在 “属性 ”面板 中 的 “ 宽 " 和 “高 ”文本 框 中 输入 图 片 
的 大 小 尺寸 ;二 是 先 选中 图 像 ,将 鼠标 移 到 图 像 周围 出 现 的 控制 点 上 ,然后 根据 箭头 方向 
拖 动 这 些 控制 点 , 即 可 改变 图 像 的 大 小 。 

小 技巧 : 在 拖 动 下 边 和 右边 上 的 控制 点 时 ,可 以 使 图 像 的 宽度 和 高 度 尺 寸 增 大 或 缩 
小 5 如果 拖 动 右 下 角 的 控制 点 ,可 以 同时 改变 图 像 的 宽度 和 高 度 , 但 容易 造成 拖 动 的 宽度 
和 高 度 比例 不 等 而 失真 ,这 时 可 以 按 下 Shift 键 来 控制 拖 放 比 例 。 
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7.3 添加 多 媒体 元 素 


为 了 增强 网 页 的 表现 力 ,丰富 网 页 的 显示 效果 ,用 户 可 以 在 网 页 中 插入 适当 的 多 媒体 
元 素 。 在 Dreamweaver 8. 0 中 ,可 以 添加 Flash 动画 、Flash 文本 、Flash 按钮 .Flash 视 
频 、Shockwave 动画 、ActiveX 控件 以 及 各 种 音频 和 视频 文件 等 。 


7.3.1 插入 Flash 对 象 


Flash 是 Macromedia 公司 出 品 的 在 网 页 中 使 用 的 动态 交互 式 多 媒体 技术 ,具有 动画 
丰富 多 彩 , 体 积 小 ,可 以 边 下 载 边 播放 等 众多 优点 ,已 逐步 成 为 交互 式 网 络 矢量 图 形 的 标 
准 。 在 Dreamweaver 8.0 中 ,提供 了 三 种 可 以 插入 的 Flash 对 象 ,包括 Flash 按钮 Flash 
文本 和 Flash 动画 。 

在 网 页 文档 中 要 插入 Flash 对 象 时 ,必须 先 保 存 文档 ,而 且 文档 所 在 的 站 点 的 各 级 目 
录 最 好 用 英文 字母 或 汉语 拼音 命名 ,否则 不 能 插入 Flash 对 象 。 


1. 插入 Flash 按钮 


Flash 按钮 对 象 可 以 定制 和 插入 一 个 已 经 设计 好 的 Flash 按钮 ,即使 不 会 使 用 Flash 
软件 也 可 以 在 Dreamweaver 8.0 中 直接 插入 Flash 动画 格式 的 按钮 。 

要 想 在 网 页 中 插入 Flash 按钮 ,可 进行 如 下 操作 。 

(1) 将 鼠标 定位 在 保存 过 的 网 页 中 要 插入 Flash 按钮 的 位 置 。 

(2) 执行 “插入 ”一 “媒体 ”一 “Flash 按钮 命令 ,或 者 单 击 “ 常 用 ”工具 栏 中 的 “媒体 ” 按 
钮 钨 ,在 弹出 的 下 拉 列 表 中 选择 "Flash 按钮 "项 。 

(3) 弹出 “插入 Flash 按钮 ”对 话 框 ,如 图 7-30 所 示 , 在 弹出 的 对 话 框 中 进行 样式 、 文 


Buon Tost) 应 有 
取消 
[Bevel ed Rect-Bronze 上 丈 取 更 多 样式 . 
Beveled Rect-Green sd 
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按钮 文本 : 
字体 :|xs tI cothic ” 国 ]) 大 小 :hz 
链接 : 浏览 .. 
目标 : Ee] 
背景 色 : 上品 
另存 为 :fbuttonll svz 浏览 ... 


图 7-30 “插入 Flash 按钮 ?对 话 框 
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本 字体. 大小、 链接 .目标 和 背景 色 等 选项 的 设置 。 

(4) 设置 完成 后 , 单 击 * 确 定 ?按钮 ,就 可 以 在 网 页 中 插入 一 个 文件 名 为 button1. swf 
的 Flash 按钮 。 

插入 Flash 按钮 后 ,还 可 以 对 其 进行 修改 ,选择 需要 修改 的 Flash 按钮 后 ,可 以 双击 
该 按钮 对 象 ,也 可 以 单 击 * 属 性 ?面板 中 的 “编辑 ?按钮 ,还 可 以 在 Flash 按钮 上 单 击 鼠标 右 
键 ,在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ,这 时 又 会 弹出 “插入 Flash 按钮 ?对 话 框 ,这 样 
就 可 以 对 该 按钮 进行 重新 设置 和 编辑 。 


2. 插入 Flash 文本 


在 网 页 中 插入 Flash 文本 和 插入 Flash 按钮 一 样 简单 ,利用 该 功能 可 以 使 用 自选 的 
字体 、 字 型 和 字号 来 制作 一 个 仅仅 包含 文本 对 象 的 Flash 动画 。 操 作 步 又 如 下 : 

(1) 将 鼠标 定位 在 要 插入 Flash 文本 的 位 置 。 

(2) 执行 “插入 ”一 “媒体 ”>“Flash 文本 ”命令 ,或 者 单 击 “ 常 用 ”工具 栏 中 的 “媒体 ” 按 
钮 面 - ,在 弹出 的 下 拉 列 表 中 选择 "Flash 文本 ”项 。 

(3) 弹出 “插入 Flash 文本 ”对 话 框 ,如 图 7-31 所 示 。 在 该 对 话 框 中 输入 要 显示 的 文 
本 并 设置 显示 文本 的 “字体 *“ 大 小 *“ 颜 色 ” 和 ” 转 滚 颜色 "等 选项 。 

(4) 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 后 , 即 可 在 网 页 中 插入 一 个 Flash 文本 对 象 。 


插入 Flash 文 本 
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图 7-31 “插入 Flash 文本 ”对 话 框 


3. 插入 Flash 动画 


在 Dreamweaver 8. 0 中 可 以 很 方便 地 插入 Flash 动画 ,具体 操作 步骤 如 下 : 

(1) 将 鼠标 定位 在 要 搬入 Flash 的 位 置 。 

(2) 执行 “插入 ”一 “媒体 ”一 Flash 命令 ,或 者 单 击 * 常 用 ?工具 栏 中 的 “媒体 ”按钮 
和 忽 -, 在 弹出 的 下 拉 列 表 中 选择 Flash 项 ,弹出 “选择 文件 ”对 话 框 。 

(3) 选择 .swf 格式 的 Flash 文件 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 指定 位 置 插入 Flash 动画 。 
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插入 Flash 动画 后 ,网 页 文档 中 会 显示 为 一 个 灰色 的 方 框 ,其 中 有 Flash 标志 。 在 如 
图 7-32 所 示 的 “属性 ”面板 中 可 以 设置 它 的 高 度 和 宽度 ,如 果 想 查看 播放 效果 ,可 以 单 击 


“属性 ”面板 中 的 “播放 ”按钮 EE 入 EJ]。 
[| Flash，164K 敲 Pa0 文件 Flashy/banner, svf @@ 回 网 山竹 | 类 (C) | 无 - 国 8 
高 Ee8 [重大 小 _] 
回 循环 垂直 边 距 | 品质 | 高 品质 国 对 齐 | 默认 值 ” 国 | [rs 播放 
回 自动 播放 水 平 边 曙 比例 | 政 认 全 部 量 示 国 | 。 表 景 大 Em 


图 7-32 Flash* 属 性 ”面板 


在 Flash 对 象 “ 属 性 ”面板 中 各 项 参数 的 功能 如 下 所 述 。 

(1) Flash: 指定 Flash 动画 的 名 称 。 

(2) 宽 和 高 : 以 像素 为 单位 指定 Flash 动画 的 宽度 和 高 度 。 

(3) 文件 : 指定 Flash 动画 文件 的 路 径 。 

(4) 循环 : 选中 此 复 选 框 ,可 以 自动 循环 播放 Flash 动画 。 

(5) 自动 播放 : 选中 该 复 选 框 ,可 以 自动 播放 Flash 动画 。 

(6) 垂直 边 距 和 水 平 边 距 : 设置 动画 在 页 面 中 的 上 下 ,左右 的 空白 量 。 

(7) 品质 ; 设置 Flash 动画 播放 的 效果 。 

(8) 比例 : 设置 Flash 动画 播放 的 比例 。 

(9) 对 齐 : 设置 Flash 动画 和 页 面 的 对 齐 方式 。 

(10) 背景 颜色 : 指定 Flash 动画 区 域 的 背景 颜色 。 

(11) CT : 重 置 Flash 动画 到 原始 大 小 。 

(12) ESBE  ], 单 击 该 按钮 ,可 以 播放 Flash 动画 效果 。 

(13) Cs : 单 击 该 按钮 ,可 以 在 打开 的 对 话 框 中 设置 Flash 动画 的 参数 。 
【实例 7-2】 利用 层 和 Flash 动画 完成 蝴蝶 在 花丛 中 飞舞 的 效果 ,如 图 7-33 所 示 。 
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图 7-33 ”实例 效果 图 
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有 时 候 在 制作 网 页 时 ,很 难 找到 称心 如 意 的 素材 ,比如 在 该 实例 中 需要 实现 蝴蝶 在 花 
从 中 飞舞 的 动态 效果 ,但 无 法 找到 合适 的 Flash 动画 , 却 只 能 找到 合适 的 花丛 图 片 和 蝴蝶 
飞舞 的 Flash 动画 ,那么 我 们 该 如 何 将 这 两 者 进行 合并 呢 ? 有 一 种 方法 是 借助 一 些 辅助 
软件 来 进行 处 理 , 比 如 PhotoShop、Fireworks、Flash 软件 等 ,但 对 于 初学 者 来 说 也 是 相当 
困难 的 。 下 面 介 绍 一 种 简单 的 方法 , 即 利 用 层 的 又 加 特性 来 完成 两 者 的 合并 。 具 体 的 操 
作 步 又 如 下 : 

(1) 在 Dreamweaver 8.0 中 新 建 一 个 空白 文档 ,将 鼠标 定位 在 要 插入 花丛 图 片 的 
位 置 。 
(2) 执行 “插入 ”图 像 "命令 ,在 弹出 的 “选择 图 像 源 文件 ?对 话 框 中 ,选择 花丛 图 片 
文件 后 , 单 击 “ 确 定 ” 按 钮 ,完成 花 从 图 片 的 插入 。 

(3) 在 “插入 ”工具 栏 中 选择 “布局 ”选项 卡 , 单 击 “ 绘 制 层 ”按钮 图 ,在 花 从 图 片 的 适当 
位 置 上 绘制 一 个 层 ,如 图 7-34 所 示 。 
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图 7-34 绘制 层 


(4) 将 鼠标 定位 在 层 中 ,执行 “插入 ”> 媒体 ”一 Flash 命令 ,在 弹出 的 “选择 文件 ”对 
话 框 中 ,选择 “hudie. swf”Flash 文件 , 单 击 “ 确 定 ” 按 钮 , 即 在 层 中 插入 蝴蝶 Flash 动画 , 调 
整 其 大 小 和 位 置 ,如 图 7-35 所 示 。 

(5) 按 F12 键 在 浏览 器 中 进行 预览 ,可 以 看 到 Flash 动画 的 原始 显示 ,如 图 7-36 所 
示 。 这 时 看 不 到 Flash 动画 后 面 的 背景 图 片 。 

(6) 返回 Dreamweaver 8.0 中 ,选中 Flash 图 标 , 在 “属性 ”面板 中 单 击 “ 参 数 ” 按 钮 ， 
打开 参数 对 话 框 , 在 该 对 话 框 中 , 单 击 加 号 按钮 时 ,在 左 侧 的 “参数 "中 输入 "wmode”, 在 
右 侧 的 “ 值 ” 内 输入 “transparent”, 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,设置 完成 ,如 图 7-37 
所 示 。 

(7) 再 次 保存 文档 , 按 F12 键 在 浏览 器 中 预览 ,就 可 以 看 到 花 从 图 片 和 蝴蝶 Flash 动 
画 的 合成 效果 了 。 

【实例 7-3】 制作 Flash 相册 ,最 终 效 果 如 图 7-38 所 示 。 

(1) 将 鼠标 光标 定位 在 要 插入 相册 的 位 置 。 
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图 7-37 设置 Flash 透明 参数 


(2) 执行 “插入 ”媒体 ”图像 查看 器 "命令 ,或 者 在 “插入 ?工具 栏 中 选择 “Flash 
元 素 ? 选 项 , 单 击 * 图 像 查 看 器 ?按钮 午 ,在 弹出 的 “保存 Flash 元 素 "对 话 框 中 ,输入 保存 的 
文件 名 , 单 击 “保存 ?按钮 关闭 对 话 框 ,完成 Flash 元 素 的 插入 。 
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(3) 在 编辑 窗口 中 选中 *Flash 元 素 ”, 面 板 窗口 中 将 出 现 一 个 “Flash 元 素 ” 参 数 面 板 ， 
如 图 7-39 所 示 。 


本 Flash 相 册 - Jicrosoft Internet Explorer 
文件 他) 编辑 (E) 查看 (DD) 收藏 他 ) 工具 (IT) 帮助 (B) 


@ 角 .四 - 国 国人 的 | 有 忆 峙 支 旦 x 加 | 全 "各 [mesh 元素 国 
Flash 元 素 
bgColor 口 下 FFFFF 
captioncolor 。 国 *333333 
captionFont Verdana 
franeColor 国 #333333 
franeShow ( 否 ) 
franeThickness 2 
inageCaptions jl 
inageLinks Dhttp://na,.. 
inageLinkTarget -blank 
inageURLs [ingl, jpg 
showControls (是 ) 
slideAutoPlay (〈 否 ) 
slideDelay 5 
slideLoop ( 赤 ) 
title 
titleColor 国 #333333 
titleFont Verdana 
titleSize 10 
transitionsType 。 Randon 


图 7-38 Flash 相册 图 7-39 “Flash 元 素面 板 


该 面板 中 的 参数 名 称 及 功能 如 下 所 述 。 

@ bgColor: 用 于 设置 图 片 播放 界面 的 背景 颜色 。 
@ captionColor: 用 于 设置 图 片 的 标题 颜色 。 

@ captionFont: 用 于 设置 图 片 的 标题 字体 。 

@ captionSize: 用 于 设置 图 片 的 标题 字体 大 小 。 
@ frameColor: 用 于 设置 相册 边框 颜色 。 

@ frameShow: 用 于 设置 是 否 显示 边框 。 

@ frameThickness: 用 于 设置 边框 的 粗细 。 

@ imageCaptions: 用 于 设置 图 片 的 标题 。 

@) imageLinks: 用 于 设置 图 片 的 链接 地 址 。 

四 imageLinkTarget: 用 于 设置 窗口 打开 方式 。 
@@ imageURLs: 用 于 设置 相册 图 片 的 来 源 位 置 。 
@ showControls: 用 于 设置 是 否 显示 控制 栏 。 

@ slideAutoPlay: 用 于 设置 是 否 自动 播放 。 

@ slideDelay: 用 于 设置 图 片 间 隔 延 时 。 

图 slideLoop: 用 于 设置 是 否 循环 播放 。 

@ title: 用 于 设置 相册 标题 。 

@ titleColor: 用 于 设置 相册 标题 颜色 。 

@ titleFont: 用 于 设置 相册 标题 字体 。 

9 titleSize: 用 于 设置 相册 标题 字体 大 小 。 

四 transitionsType: 用 于 设置 图 片 切换 的 过 渡 效 果 。 
(4) 根据 需要 ,在 “Flash 元 素面 板 中 根据 上 述 参 数 含义 进行 设置 。 
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(5) 设置 完毕 后 保存 文档 , 按 F12 键 在 浏览 器 中 进行 预览 。 


7.3.2 插入 视频 


在 众多 的 网 页 多 媒体 元 素 中 ,除了 Flash 动画 ,就 是 声音 和 视频 使 用 的 最 多 了 。 在 这 
一 节 中 将 介绍 如 何 使 用 Dreamweaver 8. 0 在 网 页 中 插入 视频 。 在 Dreamweaver 8.0 中 可 
以 通过 不 同方 式 将 不 同 格式 的 视频 文件 添加 到 Web 页 面 中 ,比如 输入 一 段 代 码 ,或 者 利 
用 Active 控件 ,以 及 Shockwave 影片 等 。 


1. 利用 ActiveX 控件 插入 视频 


ActiveX 控件 是 可 以 充当 浏览 器 插件 的 可 重复 使 用 的 组 件 , 有 些 像 微型 的 应 用 程序 。 
Dreamweaver 8.0 中 的 ActiveX 对 象 的 作用 是 为 网 页 访问 者 的 浏览 器 中 的 ActiveX 控件 
设置 属性 和 参数 。 只 要 访问 者 的 浏览 器 有 支持 ActiveX 控件 的 功能 ,就 会 自动 下 载 并 且 
执行 它 。 

在 Dreamweaver 8.0 中 插入 ActiveX 对 象 的 具 
体操 作 步 又 如 下 : 

(1) 将 鼠标 定位 到 要 插入 ActiveX 对 象 的 
位 置 。 

(2) 执行 “插入 ”一 “媒体 ”>ActiveX 命令 ,或 者 
单 击 “ 常 用 ”工具 栏 中 的 “媒体 ”按钮 忽 -, 在 弹出 的 下 
拉 列 表 中 选择 ActiveX 选项 。 即 可 在 文档 中 插入 E 
ActiveX 对 象 ,如 图 7-40 所 示 。 TCE I EE I EE 


号 Untitled-1 (XHTIL)# 国 [四 | 此 


i 
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(3) 选 定 ActiveX 对 象 ,可 以 在 如 图 7-41 所 示 图 7-40 插入 ActiveX 对 象 
的 “属性 ”面板 中 设置 其 属性 。 
压 ActiveX 宽 B2 jclassID 国 回 。” 对齐 | 四 值 ” 国 ”类 @) [无 | 8 
高 BE2 | 网 入 口 源 文 件 | [= ”播放 
垂直 边 距 基 址 参数 ... 
水 平 边 距 编号 数据 [ 敬 换 图 像 已 网 


图 7-41 ActiveX“ 属 性 ?面板 


“属性 ?面板 各 参数 的 含义 如 下 所 述 。 

OOD ActiveX: 指定 ActiveX 对 象 的 名 称 。 

@ 宽 和 高 : 指定 ActiveX 对 象 的 宽度 和 高 度 。 

G@ ClassID: 为 浏览 器 标识 ActiveX 控件 。 在 文本 框 中 输入 一 个 值 或 从 弹出 式 菜单 
中 选择 一 个 值 ,在 加 载 页面 时 ,浏览 器 使 用 该 类 ID 来 确定 与 该 页 面 关联 的 ActiveX 控件 
所 需 的 ActiveX 控件 的 位 置 。 如 果 浏 览 器 未 找到 指定 的 ActiveX 控件 , 则 它 将 尝试 从 “ 基 
址 ”指定 的 位 置 中 下 载 它 。 

@ 租 入 : 在 ActiveX 控件 的 Object 标签 中 添加 Embed 标签 。 
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@ 源 文件 : 如 果 启 用 了 "内 入 ?选项 , 则 要 用 Netscape Navigator 插件 的 数据 文件 。 
如 果 没 有 输入 值 ,那么 Dreamweaver 将 根据 已 输入 的 ActiveX 属性 确定 值 。 

EU ]: 单 击 该 按钮 ,可 以 播放 ActiveX 对 象 。 

G@ 对 齐 : 设置 ActiveX 对 象 的 对 齐 方式 。 

图 垂直 边 距 和 水 平 边 距 : 指定 ActiveX 对 象 在 页 面 中 的 上 下 ,左右 的 空白 量 。 

@ 基 址 : 指定 包含 ActiveX 对 象 的 URL。 

0 编号 : 该 文本 框 定义 了 ActiveX 控件 中 的 ID 参数 ,该 参数 专门 供 ActiveX 控件 
使 用 。 

@@ 数据: 为 要 加 载 的 ActiveX 控件 指定 数据 文件 。 许多 ActiveX 控件 (例如 
Shockwave 和 RealPlayer) 不 使 用 此 参数 。 

@@ 蔡 代 图 像 : 指定 在 浏览 器 不 支持 Object 标签 的 情况 下 要 显示 的 图 像 。 只 要 在 取 
消 对 “嵌入 ?选项 的 选择 后 此 项 才 可 用 。 

一 : 单 击 该 按钮 ,打开 对 话 框 ,在 对 话 框 中 可 设置 ActiveX 对 象 的 参数 ( 比 
如 FileName 表示 文件 名 称 ,FullScreenMode 表示 是 否 全 屏 播放 等 ) 。 


2. 插入 Shockwave 影片 


Shockwave 影 片 是 Macromedia 公司 网 上 交互 多 媒体 的 标准 ,是 一 种 允许 用 
Macromedia 的 Director 软件 创建 的 媒体 文件 ,能 够 快速 下 载 并 能 被 大 多 数 流行 的 浏览 器 
播放 的 压缩 格式 。 使 用 Shockwave 影片 可 以 播放 Flash 动画 \WMYV 和 RM 格式 的 视频 
文件 等 。 

在 Dreamweaver 8. 0 中 插入 Shockwave 影片 的 具体 操作 步骤 如 下 : 

(1) 将 鼠标 定位 在 想 要 插入 Shockwave 影片 的 位 置 。 

(2) 执行 “插入 ”一 “媒体 ”一 Shockwave 命令 ,或 者 单 击 “ 常 用 ”工具 栏 中 的 “媒体 ” 按 
钮 惫 ,在 弹出 的 下 拉 列 表 中 选择 Shockwave 选项 。 

(3) 在 弹出 的 “选择 文件 ”对 话 框 中 选择 要 插入 的 文件 ,如 图 7-42 所 示 。 单 击 “ 确 定 ” 
按钮 ,将 文件 插入 到 文档 中 ,如 图 7-43 所 示 。 


吉日 。。 回 六 人 
口 数据 潭 
查找 范 转 (I): | 局 nyveb 国 GS 9 


址 12 国 iruit 
| gtd 屿 huacongz 
abe 


此 Untitled-1 (XHTIL)# 


photo 
罩 photograph 
蛋 untitled-2 


要 使 用 此 选项 ， 请 保存 文件 - 


图 7-42 “选择 文件 ?对话 框 图 7-43 插入 Shockwave 影 片 
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(4) 选 定 Shockwave 对 象 , 可 以 在 如 图 7-44 所 示 的 “属性 ?面板 中 设置 其 属性 。 


隔 Shockwave, 宽 p6 误 作 Etle:7//EJ/ayebL wwwmvy | GE IC 搬 放 类 (C) [无 国 8 
] 高 B4 [ 多 数 .，] 
生 直 边区 | 对 齐 [加 V 值 ” 国 
| 水 平 边 了 | 背景 新 色 | 2 


7-44 ”Shockwave* 属 性 ”面板 


“属性 ”面板 各 参数 的 含义 如 下 所 述 。 

@ Shockwave: 指定 Shockwave 对 象 的 名 称 。 

@ 宽 和 高 : 指定 Shockwave 对 象 的 宽度 和 高 度 。 

@ 文件 : 指定 Shockwave 影片 文件 的 路 径 。 

@ 垂直 边 距 和 水 平 边 距 : 指定 Shockwave 对 象 在 页 面 中 的 上 下 ,左右 的 空白 量 。 
@ 对 齐 : 设置 Shockwave 对 象 在 页 面 的 对 齐 方式 。 

@@ 背景 颜色 : 指定 Shockwave 对 象 区 域 的 背景 颜色 。 

Oz ES: 单 击 该 按钮 ,可 以 播放 Shockwave 影片 。 

@ 六 一: 单 击 该 按钮 ,打开 对 话 框 , 在 对 话 框 中 可 设置 Shockwave 对 象 的 参数 。 


3. 插入 Flash 视频 


Flash 视频 是 以 . flv 为 后 级 名 的 文件 ,FLYV 流 媒 体格 式 是 一 种 新 的 视频 格式 ,全 称 为 
Flash Video。 在 Dreamweaver 8. 0 中 插入 Flash 视频 的 具体 操作 步 又 如 下 : 

(1) 将 鼠标 定位 在 要 插入 Flash 视频 的 位 置 。 

(2) 执行 “插入 ”一 “媒体 ”>“Flash 视频 ”命令 ,或 者 单 击 “ 常 用 ”工具 栏 中 的 “媒体 ” 按 
钮 忽 - ,在 弹出 的 下 拉 列 表 中 选择 Flash Video 选项 。 打 开 * 插 入 Flash 视频 ”对 话 框 ,如 
图 7-45 所 示 。 


插入 Flash 视频 


视频 类 型 : | 累进 式 下 载 视频 国 


URL: 浏览 . .。 
(输入 Flash 视频 文件 的 相对 或 绝对 路 径 ) 
外 现 : [clear Skin 1 (是 小 宽度 : 140) | 


1 m 只 


限制 高 宽 比 【检测 大 小 ] 


如 果 必要 ， 提 示 用 户 下 载 Flash Player 


页 内 容 需 要 所 
itacronedia Flash Player 版 本 一 
|。 是 否 现在 下 载 已? 尖 


图” 要 观看 视频 ， 请 在 浏览 峰 中 预 页 面 


图 7-45 “插入 Flash 视频 ”对 话 框 
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(3) 根据 如 下 的 各 属性 含义 进行 设置 。 

@ 视频 类 型 : 从 下 拉 列 表 中 选择 视频 类 型 ,包括 “累进 式 下 载 视频 ”和 “ 流 视频 ”两 种 
类 型 。 

@ URL: 在 URL 文本 框 中 输入 文件 的 相对 路 径 , 或 单 击 “ 浏 览 ” 按 钮 ,从 弹出 的 “ 选 
择 文件 ”对 话 框 中 选择 文件 的 路 径 。 

@ 外 观 : 从 下 拉 列 表 中 选择 播放 器 的 样式 。 

@ 宽度 和 高 度 : 在 “宽度 "和 * 高 度 "文本 框 中 分 别 指定 Flash 视频 的 宽度 和 高 度 。 单 
击 * 检 测 大 小 ”按钮 EBE9 可 以 确定 FLV 文件 的 准确 宽度 和 高 度 。 但 是 ,有 时 
Dreamweaver 无 法 确定 FLV 文件 的 尺寸 大 小 。 在 这 种 情况 下 ,必须 手动 输入 宽度 和 高 
度 值 。 

@ 限制 高 度 比 : 选 定 该 复 选 框 , 将 保持 Flash 视频 组 件 的 宽度 和 高 度 之 间 的 高 宽 比 
不 变 。 默 认 情况 下 会 选择 此 复 选 框 。 

@ 自动 播放 : 用 于 指定 在 页 面 打开 时 是 否 播放 视频 。 

@ 自动 重新 播放 : 指定 播放 控件 在 视频 播放 完 之 后 是 否 重新 播放 。 

(4) 设置 完成 后 , 单 击 “ 确 定 ? 按 钮 关闭 对 话 框 , 即 可 将 Flash 视频 添加 到 页 面 中 。 


4. 利用 代码 插入 视频 


利用 二 embed 二 标记 可 以 播放 影音 文件 ,通常 用 来 播放 Windows Media Player 支持 
的 格式 ,比如 wma、wmv、asf、mpg、avi 等 。 其 基本 语法 格式 为 : 二 embed src== url 二 。 

例如 ,在 Dreamweaver 8.0 的 “代码 ”视图 的 二 body 二 …</body 二 标记 中 插入 代码 
过 embed src 二 " 1. wmv "之 ,如 图 7-46 所 示 。 按 F12 键 浏览 , 则 可 在 网 页 中 插入 一 个 视 
频 文档 ,并 且 会 自动 呈现 一 条 完整 的 播放 条 ,并 且 以 影片 的 原始 尺寸 播放 画面 ,如 图 7-47 
所 示 。 


《meta http-equiv="Content-Type” content="text/html; charset=gb2312”/》 


《title> 代 码 插入 视频 </title> 
> 


/head. 


es J"] a ho% -le85 x 190"1E7I 种 
图 7-46 利用 代码 插入 视频 


二 embed 二 标记 除了 使 用 src 参数 来 标识 文件 路 径 外 ,还 可 以 通过 设置 其 他 参数 来 控 
制 影片 的 播放 效果 。 
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1. width 和 height 参数 3 = 
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如 果 因 各 种 因素 而 想 设 定 尺寸 ,例如 想 改变 影片 
画面 的 大 小 ,或 是 改变 播放 条 的 大 小 ,只 要 加 入 尺寸 
参数 “width 二 宽度 ,height 二 高 度 ” 即 可 ,比如 二 embed 
src 一 "1. wmv" width=300 height= 200>。 

注意 : 无 论 设 定 任 何 尺 寸 , 都 是 将 播放 条 包含 在 
内 的 ,所 以 在 设 定 尺 寸 时 应 该 注意 播放 条 和 画布 的 
比例 。 


2. autostart 参数 


在 网 页 文档 中 插入 的 影片 默认 情况 下 都 是 自动 图 7-47 播放 视频 
播放 的 ,如 果 不 想 自动 播放 ,可 以 设置 自动 播放 参数 


autostart 二 false, 例 如 二 embed src 一 "1. wmv "autostart 一 false 二 。 


3. loop 参数 


默认 情况 下 影片 是 不 会 循环 播放 的 ,只 播放 一 次 。 如 果 想 循环 播放 影片 ,可 以 设置 循 
环 播 放 参 数 loop= true 即 可 ,比如 二 embed src 一 "1. wmv "loop 一 true 二 。 


4. hidden 参数 

hidden 参数 的 作用 是 用 来 隐藏 面板 ,只 要 加 入 参数 hidden= true, 那 么 整个 播放 面 
板 就 会 不 见 ,在 网 页 中 什么 都 看 不 到 ,但 还 是 会 播放 声音 ,类似 背 景 音乐 。 
7.3.3 ”插入 音频 


音效 在 网 页 中 有 画龙点睛 的 作用 ,可 以 给 网 页 浏览 者 带 来 听觉 上 的 享受 。 而 背景 音 
乐 的 添加 最 为 广泛 ,在 Dreamweaver 8. 0 中 提供 了 多 种 在 网 页 中 插 和 人 背景 音乐 的 方法 , 比 
如 直接 插 人 法 .代码 法 以 及 插件 法 等 。 

1. 常用 音频 格式 


网 页 中 常用 的 音频 格式 比较 多 ,通常 使 用 的 是 扩展 名 为 mp3、wma、rm、mid 以 及 aif 
等 格式 的 音频 文件 。 表 7-1 描述 了 一 些 常 见 的 声音 文件 ,以 及 每 种 声音 格式 用 于 Web 设 
计时 的 优点 和 缺点 。 


2. 直接 插入 法 


背景 音乐 是 在 浏览 器 浏览 网 页 时 听 到 的 声音 , 它 一 般 不 需要 去 控制 ,播放 的 方式 为 循 
环 播 放 。 直 接 插 入 法 是 利用 Dreamweaver 8.0 中 的 “行为 ”功能 来 实现 的 。 其 具体 操作 步 
又 如 下 : 
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表 7-1 常见 声音 文件 用 于 Web 设计 时 的 优点 和 缺点 对 比 
音频 格式 用 于 Web 设计 时 的 优点 和 缺点 


主要 用 于 电子 乐器 音乐 。 很 多 浏览 器 不 用 插件 也 可 以 支持 midi 文件 。 虽然 其 
声音 品质 非常 好 ,但 同时 也 取决 于 访问 者 声卡 的 好 坏 。Midi 文件 不 能 录制 ,而 
必须 在 计算 机 上 使 用 特殊 的 硬件 和 软件 进行 人 工 合成 


.midi 或 .mid( 电 子 
乐器 化 数据 接口 


该 文件 有 好 的 声音 品质 ,很 多 浏览 器 不 用 插件 也 可 以 支持 wav 文件 。 可 以 从 
.wav( 波 形 扩展 ) | CD、 磁 带 、. 麦 克 风 等 输入 设备 录制 自己 的 wav 文件 。 然 而 庞大 的 文件 尺寸 限制 
了 在 Web 页 上 使 用 声音 剪辑 的 长 度 


和 wav 格式 一 样 , 它 也 有 非常 好 的 声音 品质 ,很 多 浏览 器 不 用 插件 也 可 以 支持 


ee 
-ai (声音 交换 文 | aif 文 件 。 也 可 以 从 CD、 磁带 .麦克 风 等 输入 设备 录制 自己 的 aif 文件 。 然 而 庆 


i 大 的 文件 尺寸 限制 了 在 Web 页 上 使 用 声音 剪辑 的 长 度 

jp3( 电 凡 专 家 组 | 一 种 使 声音 文件 大 小 有 实质 性 缩小 的 压缩 格式 。 其 声音 品质 非常 好 。 如 果 能 

3 ”| 正确 地 录制 和 压缩 mp3 文件 ,其 声音 品质 可 以 和 CD 媲美 。 新 技术 可 以 将 文件 
日 


“ 流 式 化 ”, 适 合 在 线 听 ,但 需要 安装 播放 插件 

有 非常 高 的 压缩 比 , 所 以 比 mp3 文件 还 要 小 ,完整 的 歌曲 文件 可 以 在 较 短 的 时 
间 内 完成 下 载 。 该 类 文件 可 以 “ 流 式 ” 播 放 , 不 需要 下 载 完 就 可 以 播放 。 但 文件 
音质 不 如 mp3, 需 要 插件 才能 播放 


.ra\ram\.rpm 或 
Real Audio 


(1) 执行 “窗口 ”行为 命令 ,打开 * 行 为 "面板 。 

(2) 在 该 面板 中 单 击 添加 行为 按钮 二 ,选择 弹出 菜单 中 的 “播放 声音 ?命令 ,在 打开 
的 如 图 7-48 所 示 的 “播放 声音 ”对 话 框 中 单 击 “ 浏 览 ” 按 钮 选择 音频 文件 。 单 击 两 次 “ 确 
定 ” 按 钮 ,网 页 中 出 现 背景 音乐 的 图 标 济 。 


图 7-48 “播放 声音 ”对 话 框 


(3) 完成 插入 后 ,此 时 的 背景 音乐 还 不 能 自动 播放 ,选中 背景 音乐 图 标 , 在 “属性 ” 面 
板 中 单 击 “ 参 数 ” 按 钮 ,在 打开 的 “参数 ”对 话 框 中 将 参数 autostart 的 默认 值 false 改 为 
true, 如 图 7-49 所 示 。 这 时 就 可 以 实现 在 打开 网 页 的 同时 背景 音乐 可 以 自动 播放 。 还 可 
以 将 参数 loop 的 默认 值 false 也 改 为 true, 这 样 背景 音乐 就 可 以 重复 播放 了 。 


外 日 


参数 值 
LOOP false 
autostart 


JMASTERSOUND MASTERSOUND 
hidden true 


图 7-49 设置 背景 音乐 参数 
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3. 代码 法 


插入 背景 音乐 的 第 二 种 方法 就 是 代码 法 。 也 就 是 直接 将 标记 二 bgsound 二 添加 到 网 
页 文件 的 所 head 之 …</head 过 之 间 , 设 置 好 背景 音乐 的 路 径 就 可 以 了 。 例 如 ,在 
Dreamweaver 8. 0 的 “代码 ”视图 的 二 head 盖 … 王 /head 之 标记 中 插入 代码 二 bgsound src 
一 "lvdong. mp3" autostart 一 true loop 二 true 之 ,如 图 7-50 所 示 。 


Transitional/VEN 
siti 


tional dtd”> 


FETTIEITTTIIOETFTEETIE 


> 
lkK/1 秒 | 
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图 7-50 利用 代码 插入 背景 音乐 


4. 插件 法 

插入 背景 音乐 的 第 三 种 方法 就 是 插件 法 。 在 Dreamweaver 8. 0 中 支持 插件 ,声音 插 
件 为 我 们 提供 了 方便 。 利 用 插件 法 进行 插入 背景 音乐 ,首先 需要 从 网 络 上 下 载 声音 插件 
sound. mxp, 然 后 双击 该 插件 进行 安装 ,安装 完成 后 ,在 “插入 ”工具 栏 的 “常用 ”选项 卡 中 
会 新 增加 一 个 Sound 按钮 碎 。 单 击 该 按钮 ,弹出 Sound 对 话 框 ,如 图 7-51 所 示 。 在 该 对 
话 框 中 单 击 Browse 按钮 ,打开 “选择 文件 ”对 话 框 选择 音频 文件 后 , 单 击 “ 确 定 ” 按 钮 , 即 
可 在 文档 中 插入 音频 。 


Select Sound file: 


[Brorse] 


Loop : Forever ® Never O 


No of tines O 


1 


Tabi. s. raj@usa. net 


图 7-51 Sound 对 话 框 


Sound 对 话 框 中 的 各 个 参数 含义 如 下 所 述 。 
(1) Browse: 单 击 该 按钮 选择 声音 文件 。 
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(2) Forever: 设置 无 限 循环 播放 。 
(3) Never: 不 循环 播放 , 即 只 播放 一 次 。 
(4) No of times: 设置 播放 的 次 数 。 


7.4 创建 表单 


在 Internet 中 ,使 用 表单 可 以 帮助 网 站 管理 者 从 用 户 处 收集 信息 , 它 是 网 站 管理 者 与 
浏览 者 之 间 沟 通 的 桥梁 。 用 户 将 某 些 信息 以 表单 的 形式 提交 给 服务 器 ,接收 到 这 些 信 息 
的 网 站 管理 者 再 根据 用 户 提供 的 这 些 信 息 做 相应 的 处 理 ,反馈 给 用 户 。 表 单 在 网 上 随处 
可 见 , 如 账户 申请 、 邮 箱 申 请 、 网 上 信息 注册 、 网 上 调查 以 及 填写 订单 等 。 

表单 有 两 个 重要 组 成 部 分 : 一 是 描述 表单 的 HTML 源 代码 ;二 是 用 于 处 理 用 户 在 表 
单 域 中 输入 的 服务 器 端 应 用 程序 客户 端 脚本 ,如 ASP、JSP 等 。 所 以 创建 表单 网 页 时 , 通 
常 步骤 是 先 创建 表单 并 设置 表单 属性 ,然后 创建 表单 对 象 并 设置 其 属性 ,并 对 用 户 的 提交 
情况 进行 验证 ,最 后 使 用 ASP.PHP、JSP 等 编程 语言 编写 对 提交 信息 的 处 理 程序 (包括 
收集 用 户 提交 的 表单 数据 \ 对 表单 数据 进行 处 理 ,返回 处 理 结果 给 用 户 ) 。 

本 节 只 介绍 前 台 表 单 的 制作 。 


7.4.1 添加 表单 


表单 是 表单 元 素 的 容器 ,同时 也 包含 如 何 传送 表单 数据 .向 哪 一 个 动态 网 页 提交 表单 
数据 等 信息 。 在 制作 表单 页 面 时 ,需要 先 创 建 表单 ,这 样 添加 的 表单 元 素 才能 正常 工作 。 
在 Dreamweaver 8.0 中 添加 的 表单 以 红色 虚线 框 显示 ,并 且 会 独占 一 行 ,与 其 相 邻 的 元 素 
有 一 定 的 间距 ,表单 在 浏览 器 中 浏览 时 是 不 可 见 的 。 

创建 表单 可 以 通过 菜单 命令 创建 ,也 可 以 使 用 “表单 "面板 上 的 按钮 来 创建 。 其 具体 
操作 步骤 如 下 : 

(1) 将 鼠标 定位 在 要 插入 表单 的 位 置 。 

(2) 执行 “插入 ”一 “表单 "命令 ,或 者 在 “ 表 
单 ” 插 入 栏 中 单 击 “ 表 单 ” 按 钮 国 , 即 可 插入 表 
单 ,插入 表单 后 效果 如 图 7-52 所 示 。 

创建 好 表单 后 ,通过 对 表单 属性 的 设置 ,就 
能 实现 网 页 交互 功能 。 选 中 表单 后 , 即 可 在 “ 属 
性 ”面板 中 进行 设置 ,如 图 7-53 所 示 。 

“属性 ?面板 中 各 参数 的 含义 如 下 所 述 。 

(1) 表单 名 称 : 用 来 设置 表单 的 名 称 。 

(2) 动作 : 用 来 设置 服务 器 端 处 理 表 单数 昌 
据 的 文件 源 ,可 以 是 URL 地 址 .HTTP 地 址 。 上 zeilwaSor -ER 的 
也 可 以 是 E-mail 地 址 。 7-52 插入 表单 


蕊 Untitled-1 (XHTIL)# 
TP PR 
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表单 名 称 动作 
区 而 廊 法 |POST 国 MDIE 类 型 


图 7-53 表单 “属性 ”面板 


(3) 方法 : 设置 数据 传递 给 服务 器 的 方式 ,有 POST 和 GET 两 种 方式 ,通常 使 用 
POST 方法 。POST 方式 是 将 所 有 信息 封装 在 HTTP 请 求 中 ,是 一 种 可 以 传递 大 量 数据 
的 较 安全 的 传送 方式 ;GET 方式 则 直接 将 数据 追加 到 请 求 该 页 的 URL 中 ,只 能 传递 有 限 
的 数据 ,并 且 传 送 时 不 安全 ,可 直接 看 到 。 

(4) 目标 : 设置 打开 处 理 页 面 的 方式 。 

(5) MIME 类 型 : 设置 发 送 表单 到 服务 器 的 媒体 类 型 , 它 只 在 发 送 方法 为 POST 时 
才 有 效 。 其 默认 值 为 application/x-www-form-urlemoded; 如 果 要 创建 文件 上 传 域 ,应 选 
择 multipart-form-data。 

注意 ; 在 同一 个 网 页 中 可 以 有 多 个 表单 ,但 是 各 个 表单 的 名 称 不 能 相同 ,否则 会 引起 
冲突 ,从 而 不 能 实现 某 种 效果 。 


7.4.2 添加 表单 元 素 


在 网 页 中 ,表单 元 素 可 以 实现 网 页 的 具体 功能 。 通 过 在 表单 中 创建 不 同 的 表单 元 素 ， 
可 以 让 用 户 实现 不 同 的 操作 ,例如 输入 ,选择 等 。 表 单元 素 的 创建 方法 基本 相同 ,首先 在 
表单 中 将 鼠标 光标 定位 在 要 创建 表单 元 素 的 位 置 , 然 后 执行 “插入 ”表单 ”命令 ,在 弹出 
的 下 拉 菜 单 中 ,选择 要 插入 的 表单 对 象 。 或 者 在 “表单 "插入 工具 栏 中 , 单 击 要 插入 的 表单 
对 象 按钮 即 可 。 下 面 分 别 介绍 各 种 常用 表单 元 素 的 使 用 方法 及 其 属性 设置 。 


1. 文本 字段 


文本 字段 就 是 可 输入 的 文本 框 ,是 表单 中 最 常见 的 表单 元 素 之 一 。 在 文本 字段 中 可 
以 输入 任何 类 型 的 文本 内 容 , 如 姓名 、 密 码 .E-mail\ 个 人 介绍 等 。 文 本 字段 可 以 以 单行 或 
多 行 显示 ,也 可 以 以 密码 方式 显示 ,如 图 7-54 所 示 。 在 以 密码 方式 显示 的 情况 下 ,输入 的 
文本 将 替换 为 星 号 或 项 目 符号 以 隐藏 该 文本 ,保护 这 些 信息 不 被 看 到 。 

创建 文本 字段 的 具体 操作 方法 是 : 将 鼠标 光标 放 到 要 插入 文本 框 的 位 置 ,执行 “ 插 
和 人 ”一 “表单 ”一 “文本 域 ”命令 ,或 单 击 “ 表 单 ” 插 入 工具 栏 中 的 “文本 字段 ”按钮 加 , 即 可 
插入 一 个 文本 字段 ,如 图 7-55 所 示 。 

选 定 文本 字段 后 ,可 以 通过 如 图 7-56 所 示 的 “属性 ”面板 进行 属性 设置 ,其 各 项 参数 
含义 如 下 所 述 。 

(1) 文本 域 : 输入 文本 框 名 称 。 每 个 文本 域 必须 有 一 个 唯一 的 名 称 。 

(2) 字符 宽度 : 用 来 设置 文本 域 字符 宽度 。 默 认为 24 个 字符 的 宽度 。 

(3) 最 大 字符 数 : 当 文 本 域 为 单行 文本 域 或 密码 文本 域 时 ,设置 文本 域 中 最 多 可 输 
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名 无 标题 文档 - Eicrosoft mt -器 区 | 
文件 全 ) 编辑 (E) 查看 () 收藏 ) 工 ; ”| 应 
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yoyo_zyy 
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图 7-55 插入 的 文本 字段 


加 用 


kextfield 


图 7-56 文本 字段 “属性 ”面板 


入 的 字符 数 。 

(4) 初始 值 : 指定 当 表 单 首 次 被 载 和 人 时 显示 在 文本 域 中 的 值 。 

(5) 类 型 : 用 于 选择 文本 字段 的 类 型 ,包括 单行 ,多 行 和 密码 。 默 认为 单行 ,表示 文 
本 框 中 只 能 显示 一 行文 本 。 选 择 “ 多 行 ", 表 示 文 本 框 中 可 以 显示 多 行文 本 ,并 且 选 择 该 项 
时 ,“ 属 性 ”面板 将 发 生变 化 ,增加 了 用 于 设置 多 行文 本 的 选项 ,如 图 7-57 所 示 。 


国 文本 如 OB 类 (@) [无 国 


[textarea ~ 


图 7-57 多 行文 本 “属性 ”面板 


当 设置 文本 字段 类 型 为 “多 行 " 时 ,可 以 设置 如 下 参数 。 

吕 行 数 : 设置 多 行文 本 字段 的 显示 行 数 。 

@ 换行 : 指定 当 用 户 输入 的 内 容 较 多 时 ,这 些 内 容 如 何 换行 “换行 ?下 拉 列 表 中 包 
括 “ 默 认 ”“ 关 ”“ 虚 拟 ” 和 “实体 ”四 个 选项 。 选 择 “ 默 认 ” 时 , 当 文 本 字段 中 的 内 容 超过 其 
右边 界 时 ,文本 将 向 左 侧 滚动 ,此 时 需要 按 Enter 键 换 行 ;“ 关 ”选项 与 默认 ”选项 作用 相 
同 ; 选 择 “ 虚 拟 ” 选 项 或 “实体 ”选项 时 , 当 用 户 输 入 的 内 容 超 过 文本 字段 的 右边 界 时 ,文本 
将 自动 换 到 下 一 行 。 二 者 的 区 别 在 于 ,选择 前 者 时 ,提交 的 数据 不 包括 换行 符 , 选 择 后 者 
时 ,提交 的 数据 包括 换行 符 。 
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2. 复 选 框 


复 选 框 常用 于 进行 多 项 选择 ,如 选择 兴趣 爱好 、 订 阅 电子 杂志 等 。 在 同一 个 表单 中 ， 
复 选 框 控件 既 可 以 全 部 为 空 , 也 可 以 进行 多 选 ,并 且 每 
一 个 复 选 框 之 间 互 不 影响 。 

创建 复 选 框 的 具体 操作 方法 是 : 将 鼠标 光标 放 在 表 
单 中 要 插入 复 选 框 的 位 置 ,执行 “插入 ”一 “表单 ”>“ 复 
选 框 ” 命 令 , 或 单 击 “ 表 单 " 插 入 工具 栏 中 的 “ 复 选 框 ” 按 
钮 固 , 即 可 搬入 复 选 框 , 复 选 框 显示 为 一 个 小 方块 ,在 它 
后 面 可 以 加 上 说 明文 字 , 如 图 7-58 所 示 。 

选 定 复 选 框 ,“ 属 性 ”面板 如 图 7-59 所 示 。 其 各 项 参 
数 含义 如 下 所 述 。 

(1) 复 选 框 名 称 : 用 来 设置 复 选 框 的 名 称 。 


回 复 选 框 名 称 选 定 值 Eheckbox 初始 状态 〇 已 勾 先 类 (CC) [无 司 8 
[checkbox 回 未 选中 


ee 


图 7-59 复 选 框 * 属 性 ”面板 


(2) 选 定 值 : 用 来 设置 复 选 框 被 选中 时 的 取 值 。 当 用 户 提 交 表 单 时 ,该 值 被 传送 给 
服务 器 端 应 用 程序 。 
(3) 初始 状态 : 设置 第 一 次 载 人 表单 时 复 选 框 是 否 选中 。 


3. 单 选 按钮 


单 选 按钮 常用 于 进行 取舍 选择 ,如 选择 性 别 、 婚 姻 状 况 等 。 单 选 按钮 以 组 的 形式 存 
在 ,每 一 组 中 只 能 有 一 个 单 选 按钮 被 选中 。 

插入 单 选 按钮 的 具体 操作 方法 是 : 将 鼠标 光标 放 在 
表单 中 要 搬入 单 选 按钮 的 位 置 ,执行 “ 插 人 ”一 "表单 ”一 
“ 单 选 按钮 ”命令 ,或 单 击 “ 表 单 " 插 人 工具 栏 中 的 * 单 选 
按钮 "按钮 加 ,如 图 7-60 所 示 即 为 插入 的 单 选 按钮 。 

选 定单 选 按钮 后 “属性 ?面板 上 的 内 容 如 图 7-61 所 
示 。 面 板 上 各 项 的 设置 与 复 选 框 的 设置 类 似 。 


4. 单 选 按钮 组 


单 选 按钮 组 主要 是 为 了 方便 地 插入 一 组 单 选 按钮 ， 
这 样 在 制作 单 选 按钮 时 不 易 出 现 错误 。 搬 入 单 选 按钮 组 的 具体 操作 步骤 如 下 : 
(1) 将 鼠标 光标 放 在 表单 中 要 插入 单 选 按钮 组 的 位 置 。 
(2) 执行 “插入 ”一 “表单 ”>“ 单 选 按 钮 组 ”命令 ,或 单 击 “ 表 单 ” 插 入 工具 栏 中 的 “ 单 选 


图 7-60 插入 的 单 选 按钮 
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图 7-61 单 选 按钮 “属性 ?面板 


按钮 组 ”按钮 圈 ,弹出 * 单 选 按钮 组 对话 框 ,如 图 7-62 所 示 。 


布局 ， 使 用 : @ 换行 符 (<br> 标签 ) 
〇 表格 


图 7-62 “ 单 选 按钮 组 ”对 话 框 


(3) 在 “名 称 ” 文 本 框 中 输入 单 选 按钮 组 的 名 称 。 

(4) 单 击 “ 标 签 ” 列 的 文字 ,文字 变 为 可 编辑 状态 ,可 以 输入 需要 的 内 容 。“ 标 签 ” 列 设 
置 的 是 单 选 按钮 旁边 的 说 明文 字 。 

(5) 单 击 * 值 " 列 的 文字 ,文字 变 为 可 编辑 状态 ,可 以 输入 需要 的 内 容 。“ 值 ? 列 设置 的 
是 选中 单 选 按钮 后 提交 的 内 容 。 

(6) 在 “布局 ,使 用 ”中 可 以 选择 “换行 符 ” 或 “表格 ”来 设置 组 中 单 选 按钮 的 布局 。 若 
选择 “表格 ”按钮 , 则 会 创建 一 个 单列 的 一 格 , 并 将 单 选 按钮 放 到 表格 的 左 侧 , 将 标签 放 在 
右 侧 。 

(7) 单 击 “ 确 定 ” 按 钮 , 即 可 在 相应 位 置 插入 单 选 按钮 组 。 


5. 列表 /菜单 


列表 是 以 列表 的 方式 显示 的 一 组 选项 ,由 于 设置 的 不 同 ,用 户 可 以 在 其 中 选择 一 项 或 
多 项 。 

创建 列表 /菜单 的 具体 操作 方法 是 : 将 鼠标 光标 放 
在 表单 中 要 插入 列表 /菜单 的 位 置 ,执行 “插入 ”一 “ 表 
单 ”>“ 列 表 / 菜 单 ”命令 ,或 单 击 “ 表 单 ” 插 入 工具 栏 中 的 
“列表 /菜单 ”按钮 图。 插入 的 列表 /菜单 如 图 7-63 所 示 。 

选 定 列表 /菜单 后 ,“ 属 性 ”面板 如 图 7-64 所 示 。 其 
各 项 参数 含义 如 下 所 述 。 

(1) 列表 /菜单 : 用 于 设置 列表 /菜单 的 名 称 。 

(2) 类 型 . 指定 此 对 象 是 弹出 菜单 还 是 滚动 列表 。 Es 
对 于 列表 ,用 户 可 以 设置 高 度 , 即 在 不 滚动 情况 下 显示 图 7-63 插入 的 列表 /菜单 
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图 7-64 列表 /菜单 “属性 ?面板 


出 来 的 选项 数 ; 选 定 “ 允 许多 选 复 选 框 ,还 可 以 设置 是 否 允 许 用 户 从 列表 中 选择 多 项 。 

(3) 高 度 : 用 于 设置 列表 框 的 高 度 ( 只 用 于 列表 ), 即 列表 框 中 显示 的 行 数 。 

(4) 选 定 范围 : 列表 框 的 选取 方式 (只 用 于 列表 )。 选 中 “允许 多 选 " 复 选 框 后 , 则 可 
以 使 用 Shift 键 对 列表 进行 多 选 。 

(5) 初始 化 选 定 : 指定 列表 /菜单 开始 显示 时 定位 在 哪 一 个 选项 上 。 

(6) 列表 值 : 单 击 该 按钮 ,打开 * 列 表 值 ?对 话 框 ,如 图 7-65 所 示 。 在 “项 目标 签 ” 下 可 
输入 列表 /菜单 内 容 , 单 击 四 按钮 添加 新 内 容 , 单 击 四] 按钮 删除 内 容 ;添加 完成 后 ,可 单 击 
“确定 ”按钮 ,如 图 7-66 所 示 即 为 添加 后 的 列表 值 。 


图 7-65 “列表 值 ”对 话 框 图 7-66 添加 后 的 列表 值 


6. 按钮 


HTML 文档 中 存在 3 种 类 型 的 按钮 。 

(1) 提交 按钮 : 单 击 时 将 表单 数据 提交 到 表单 域 Action 属性 所 指定 的 服务 器 端 程序 
或 一 个 E-mail 地 址 。 

(2) 重 置 按钮 : 单 击 后 表单 中 的 各 项 数据 恢复 为 初始 值 状 态 。 

(3) 命令 按钮 : 必须 为 它 编制 相应 的 脚本 程序 ,将 按钮 链接 到 特定 的 函数 ,否则 默认 
状态 下 ,添加 的 按钮 是 一 个 提交 类 型 的 按钮 。 

创建 按钮 的 具体 操作 方法 是 : 将 鼠标 光标 放 在 表单 
中 要 插入 按钮 的 位 置 ,执行 “插入 ”> 表单 ”按钮 7 命 
令 , 或 单 击 “ 表 单 ? 插 入 工具 栏 中 的 “按钮 7 回 , 即 可 插入 
按钮 ,如 图 7-67 所 示 。 

插 和 人 按钮 后 , 选 定 按钮 “属性 ?面板 上 的 内 容 如 
图 7-68 所 示 。 其 各 项 参数 含义 如 下 所 述 。 

(1) 按钮 名 称 : 用 来 给 按钮 命名 。 

(2) 值 : 用 来 设置 显示 在 按钮 上 的 文本 内 容 。 

(3) 动作 : 设置 单 击 按钮 时 发 生 的 动作 。 有 “提交 
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蕊 Untitled-5 (XHTIL)# [ 国 |[mlbd 
和 Bu 两 澡 所 再 “TH + 沁 


四 按钮 名 称 值 妨 妇 均 ”| ”动作 @ 提 交 素 单 。 ”O 〇 无 类 (@) [无 国 9 
Bubnit 〇 重 设 表单 


图 7-68 按钮 “属性 ?面板 


表单 ”"“ 重 设 表单 ”“ 无 3 个 单 选 按钮 供 选择 。“ 提 交 表 单 " 表 示 单 击 该 按钮 可 提交 表单 
中 的 内 容 ;“ 重 设 表单 "表示 单 击 该 按钮 可 清空 表单 中 的 内 容 ;* 无 ”表示 需要 另外 添加 程序 
才 可 能 执行 相应 操作 。 


7. 图 像 域 


图 像 域 一 般 应 用 于 表单 中 ,作用 就 是 触发 表单 的 相关 操作 ,与 按钮 的 功能 和 类 型 是 类 
似 的 ,只 是 以 图 片 的 方式 显示 ,从 而 使 其 更 加 美观 。 | 

插入 图 像 域 具体 操作 方法 是 : 将 鼠标 光标 放 在 表 | 文件 编 畦 (ED) 查看 QD” 收 隔 (8) 
单 中 要 插入 图 像 域 的 位 置 ,执行 “插入 ”一 “表单 ”一 
“图 像 域 "命令 ,或 单 击 “ 表 单 " 插 入 工具 栏 中 的 “图 像 
域 "按钮 贸 , 打 开 “ 选 择 图 像 源 文件 ”对 话 框 ,从 中 选择 
一 幅 图 片 , 单 击 “ 确 定 ” 按 钮 即 可 在 表单 中 插入 图 像 。 
如 图 7-69 所 示 即 为 插入 的 “登录 ”图 片 按钮 。 

选中 图 像 域 后 ,“ 属 性 ”面板 上 的 内 容 如 图 7-70 所 
示 。 其 各 项 参数 含义 如 下 所 述 。 

(1) 图 像 区 域 : 用 来 设置 图 像 域 的 名 称 。 

(2) 源 文件 : 用 来 设置 图 像 的 URL 地 址 。 图 7-69 插入 的 图 像 域 

(3) 替换 : 用 来 指定 鼠标 放 在 图 像 上 或 不 显示 图 
像 时 所 显示 的 替代 文本 。 

(4) 对 齐 : 设置 图 像 的 对 齐 方式 。 

(5) 编辑 图 像 : 单 击 该 按钮 ,可 以 启动 外 部 图 像 编辑 器 编辑 图 像 。 


as。 图像 区 域 25K 源 文件 ng70L1. png 互 ” ”对齐 [居中 国 类 @ [元 图 9 
linageField 蔡 换 | 编辑 图 像 


图 7-70 图 像 域 “属性 ?面板 


说 明 : 默认 情况 下 ,图 像 域 只 具有 提交 表单 的 功能 ,如 果 要 改变 其 用 途 , 需 要 为 表单 
对 象 添加 “行为 ”或 脚本 代码 。 


8. 文件 域 


文件 域 由 一 个 文本 框 和 一 个 显示 “浏览 ”字样 的 按钮 组 成 , 它 的 作用 就 是 指定 文件 在 
本 地 的 路 径 和 名 称 。 
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插入 文件 域 具体 操作 方法 是 : 将 鼠标 光标 放 在 
表单 中 要 插入 文件 域 的 位 置 ,执行 “插入 ”一 “表单 ”一 
“文件 域 ”命令 ,或 单 击 “ 表 单 ” 插 入 工具 栏 中 的 “文件 
域 " 按 钮 逢 ,插入 的 文件 域 如 图 7-71 所 示 。 

选 定 文件 域 “属性 ?面板 如 图 7-72 所 示 。 其 各 
项 参数 含义 如 下 所 述 。 

(1) 文件 域名 称 : 用 来 设置 文件 域 的 名 称 。 

(2) 字符 宽度 : 用 来 设置 文本 与 的 宽度 ,单位 是 和 
字符 (英文 字符 ) 。 


图 7-72 文件 域 “ 属 性 ?面板 


(3) 最 多 字符 数 : 用 来 设置 文本 域 中 可 以 出 现 的 最 多 字数 。 

说 明 : 在 网 页 中 添加 的 文件 域 还 不 能 真正 实现 上 传 文件 的 功能 , 它 只 实现 传递 要 上 
传 文件 的 完整 路 径 的 功能 ,要 实现 真正 的 上 传 ,还 需要 编写 相应 的 程序 代码 才 行 。 

【实例 7-4】 制作 一 个 如 图 7-73 所 示 的 注册 页 面 。 


文件 (E) 编 强 (E) 查看 (2) 收藏 (&) 工具 (IT) 枯 助 (有 ) = 
Ga- 日 -四 加 从 Pay 灾 bgx @| 全 -加 回 - 池 


总 堪 | 国 | 个 E:\nyveb\ 注 册页 面 , htal 


注册 页 面 “ 带 * 号 为 必 填 项 ) 
用 户 各 : 


sm [| 
确认 窜 码 。 
您 的 出 生日 期 : [ls77 国 年 [o: 国 月 |ox 男 日 


性 别 日 男 @ 女 


图 7-73 注册 页 面 


(1) 新 建 一 个 网 页 ,在 “表单 ?插入 工具 栏 上 单 击 “ 表 单 " 按 钮 图 ,在 页 面 中 插入 表单 。 
这 时 在 文档 中 将 出 现 一 个 红色 虚线 框 .如 图 7-74 所 示 。 
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(2) 将 鼠标 移 至 表单 中 ,执行 “插入 ”> 表格 ?命令 在 文档 中 插入 一 个 1 行 1 列 , 宽 为 
600 像素 ,边框 粗细 为 1 像素 的 表格 ,并 将 表格 设置 为 居中 对 齐 , 插 入 的 表格 如 图 7-75 
所 示 。 


4 口 器 E: Nmyweb\ 注 册页 面 - html CHTHL)# 
本 li 日 b Bl PN nu Pi PN 
四 
是 
有 
汪 
vtorntrorn | \ lho ~ ee ea 下 ooawy Cferatforal)K table)] 
图 7-74 插入 表单 图 7-75 插入 表格 


(3) 选中 单元 格 ,在 “属性 ?面板 上 将 水 平 对 齐 方式 设置 为 "居中 ”, 垂 直 对 齐 方式 设置 
为 “顶端 ”, 然 后 在 表格 中 输入 文字 ,如 图 7-76 所 示 。 


局 下 : \myweb\ 注 册页 面 . html (XHTML)# 
pe 于 和 :于 


证 洲 页 面 C 帮 + 号 为 儿 需 项 )T 


图 7-76 输入 文字 


(4) 按 下 Enter 键 换行 ,输入 文字 “用 户 名 : ”, 然 后 单 击 “ 表 单 ? 插 入 工具 栏 上 的 “文本 
字段 ?按钮 区] ,插入 文本 字段 。 选 中 该 文本 字段 ,在 “属性 ?面板 上 ,设置 “字符 宽度 ”为 
10,“ 最 多 字符 数 ” 为 20, 如 图 7-77 所 示 。 

(5) 按 下 Enter 键 换行 ,输入 文字 * 密 码 : ”, 然 后 再 插入 一 个 文本 字段 。 在 “属性 ” 面 
板 上 ,设置 “字符 宽度 ”为 10,“ 最 多 字符 数 ” 为 20, 并 选择 “密码 ” 单 选 按钮 ,如 图 7-78 
所 示 。 

(6) 按 下 Enter 键 换行 ,输入 文字 “确认 密码 :”, 然 后 继续 插入 一 个 文本 字段 。 在 “ 属 
性 ”面板 上 ,设置 “字符 宽度 ”为 10,“ 最 多 字符 数 ” 为 20, 并 选择 “密码 ” 单 选 按钮 ,如 图 7-79 
所 示 。 

(7) 按 下 Enter 键 换行 ,输入 文字 "您 的 出 生日 期 : ”, 然 后 单 击 * 表 单 ? 插 入 工具 栏 上 的 
“列表 /菜单 "按钮 围 ,插入 一 个 菜单 。 选 中 插入 的 菜单 , 单 击 “ 属 性 ?面板 上 的 二 3EE ] 按 
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RB an Pn PR , 

| 证 耶 页 面 《 帮 + 号 为 次 需 项 ) 
匡 | 用 户 名 : 
让 | 
局 
Es 
证 区 二 上 类 型 @ 单 行 5 
站 [textfisld | 最多 字符 数 20 初始 直 | 
三 执行 < 
forml>《table | 


图 7-77 插入 文本 字段 


文本 域 字符 宽度 类 型 〇 单行 


[textficld2 景 多 字符 数 2) |] 。 初始 值 [ 


换行 [ us 


图 7-78 插入 密码 域 


文本 域 字符 宽度 [10 类 型 〇 单行 Oi 回 窗 三 


extficld3 景 多 字符 数 [20 初始 值 


> 


图 7-79 插入 确认 密码 


钮 ,弹出 “列表 值 ? 对 话 框 , 在 对 话 框 中 的 "项 目标 签 ” 列 表 框 中 输入 如 图 7-80 所 示 的 列表 


项 目 。 


(8) 设置 完成 后 , 单 击 己 于 按钮 。 然 后 按照 同样 的 方法 ,制作 出 如 图 7-81 所 示 的 
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表单 元 素 。 


图 7-80 “列表 值 ?对 话 框 


总:\myweb\ 注 册页 面 . html (XHTITL)# 
ee 


图 7-81 制作 列表 /菜单 


(9) 按 下 Enter 键 换行 ,输入 文字 "性 别 : ”, 然 后 单 击 “ 表 单 " 插 入 工具 栏 上 的 “ 单 选 按 
钮 组 ” 圈 ,打开 * 单 选 按钮 组 ?对话 框 ,设置 两 个 标签 " 男 *“ 女 ”, 如 图 7-82 所 示 。 单 击 “ 确 
定 ?按钮 后 即 可 制作 出 如 图 7-83 所 示 的 表单 元 素 。 


单 选 按钮 组 


省 称 :Radicroml |] 
单 选 按钮 : 后 ] 已 回回 


布局 ， 使 用 : @) 换行 符 (<br> 标签) 
〇 表格 


图 7-82 “ 单 选 按 钮 组 ”对 话 框 


(10) 按 下 Enter 键 换行 ,输入 文字 * 个 人 简介 : ”, 然 后 单 击 * 表 单 "插入 工具 栏 上 的 
“文本 区 域 "按钮 国 ,插入 多 行文 本 区 域 。 选 中 该 文 本 区 域 ,在 * 属 性 "面板 上 ,设置 “字符 
宽度 "为 20… 行 数 "为 3 初始 值 "为 "说 一 说 吧 ……”, 如 图 7-84 所 示 。 

(11) 按 下 Enter 键 换行 , 单 击 "表单 "插入 工具 栏 上 的 按钮 回 ,插入 一 个 按钮 。 选 中 
按钮 ,在 “属性 "面板 上 ,设置 “ 值 "为 “确定 ", 如 图 7-85 所 示 。 
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时 页 面 gE 加 | 
了 了 EN 画 “天 + 可 玖 她 项 页 7 
本 用 记名 ， | 


密码 ; ] 


确认 密码 ， | 


您 的 出 生 9 期 ，[1977 国 年 喇 国 iim 国 6 
性 O 〇 男女 | 


是 
3 


a 图 
body》 Cform#fornl> Ctabley <try Cty p> [NO ao% -x 3R/1 和 和 
图 7-83 制作 单 选 按钮 组 

册页 面 口 
| 1 rN 理 L 1 L 1 Tf 1 tT | 
E ! EE | 国 | 
确认 密码 : 
L 您 的 出 生 6 期 ，[1977 贺年 [1 国 月 叶 国 昌 
. 性 别 ， 〇 男 口 女 
个 人 简介 ，! 
EL 
文本 域 字符 宽度 0 | 类 型 D 〇 单行 回 多 行 
hertarea | 行 歼 E ] 初始 入 [说 一 说 吧 ……… 
| 执行 


图 7-84 制作 文本 区 域 


晤 FE:Nmyweb\ 注 册页 面 -html (CXHTIL)# 


上 Er 
| 确认 密码 ，[ 一 一] 
E 您 的 出 生 6 期 ，[1977 国 年 国有 [0 国 日 
上 性 别 ， 

| 


图 7-85 ”制作 “确定 ”按钮 


(12) 按照 同样 的 方法 再 插入 一 个 “取消 ”按钮 。 
(13) 保存 网 页 , 按 F12 键 预览 网 页 。 
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7.5 添加 超 链接 


在 网 站 的 创作 过 程 中 , 超 链接 是 最 重要 的 部 分 之 一 。 它 是 连接 网 站 中 单个 网 页 的 桥 
梁 , 通 过 它 能 够 实现 页 面 与 页 面 之 间 的 跳 转 ,从 而 有 机 地 将 网 站 中 的 每 个 页 面 链接 起 来 ， 
使 浏览 者 能 快速 方便 地 访问 到 想 要 访问 的 页 面 。 超 链接 可 以 是 文本 、 图 像 或 是 其 他 的 网 
页 元 素 , 鼠 标 光标 移 至 超 链接 处 会 变 成 手 形 , 单 击 即 可 跳 转 至 其 链接 的 页 面 或 文件 。 单 击 
鼠标 的 位 置 称 为 链接 源 ,而 跳 转 至 的 位 置 称 为 链接 目标 。 

超 链接 根据 链接 源 和 链接 目标 可 以 有 不 同 的 分 类 ,根据 链接 源 可 以 分 为 文本 链接 、 图 
像 链接 和 表单 链接 等 。 

(1) 文本 链接 : 以 文字 作为 超 链接 源 , 即 单 击 文本 可 以 跳 转 到 相应 的 链接 目标 。 通 
常 文本 链接 都 具有 下 划 线 。 

(2) 图 像 链接 : 以 图 片 作为 超 链接 源 , 单 击 图 像 可 以 跳 转 至 相应 的 链接 目标 。 

(3) 表单 链接 : 一 种 能 够 比较 特殊 的 超 链 接 , 是 在 填写 完 表单 后 单 击 提交 或 重 置 按 
钮 即 可 跳 转 至 相应 的 链接 目标 。 

根据 链接 目标 的 不 同 ,可 以 将 超 链 接 分 为 内 部 链接 、 外 部 链接 、 锚 点 链接 和 电子 邮件 
链接 等 。 

(1) 内 部 链接 : 跳 转 的 页 面 都 是 网 站 内 的 页 面 ,可 以 实现 页 面 与 页 面 之 间 的 跳 转 。 

(2) 外 部 链接 : 跳 转 的 页 面 是 网 站 外 的 页 面 ,可 以 实现 网 站 与 网 站 之 间 的 跳 转 。 

(3) 锚 点 链接 : 可 以 实现 在 当前 文档 不 同位 置 的 跳 转 ,也 可 以 跳 转 到 其 他 文档 的 指 
定位 置 上 ,通常 用 于 页 面 内 容 包含 大 量 文本 信息 的 网 页 ,可 以 增加 浏览 速度 。 

(4) 电子 邮件 链接 : 单 击 电子 邮件 链接 ,系统 会 自动 启动 电子 邮件 程序 (如 Outlook 
等 ), 然 后 将 写 好 的 电子 邮件 发 送 到 所 链接 的 邮箱 中 。 

在 下 面 的 内 容 中 将 具体 介绍 这 些 链 接 的 制作 方法 。 


7.5.1 认识 路 径 


认识 了 解 链接 与 被 链接 文档 的 文件 路 径 , 对 于 创建 链接 至 关 重 要 。 一 般 来 说 ,链接 的 
路 径 可 以 使 用 3 种 表示 方式 : 绝对 路 径 、 根 目录 相对 路 径 和 文档 目录 相对 路 径 。 


1. 绝对 路 径 


绝对 路 径 是 包含 服务 器 规范 在 内 的 完全 路 径 ( 网 页 一 般 使 用 http://) , 它 包含 的 是 精 
确 地 址 , 同 链接 的 源 端点 无 关 。 只 要 站 点 地 址 不 变 , 无 论文 档 在 站 点 中 如 何 移 动 ,都 可 以 
正常 实现 链接 。 例 如 ,http://www. macromedia. com/support/dreamweaver/contents. 
html 即 是 一 个 绝对 路 径 。 

创建 外 部 链接 时 ( 即 从 一 个 网 站 的 网 页 链接 到 其 他 网 站 的 网 页 ) ,必须 使 用 绝对 路 径 。 
但 是 使 用 绝对 路 径 不 利于 测试 ,如 果 在 站 点 中 使 用 绝对 路 径 , 要 想 测试 链接 是 否 有 效 , 必 
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须 连 接 到 Internet 上 。 
2. 根 目 录 相 对 路 径 


根 目 录 相 对 路 径 是 指 从 站 点 根 文件 夹 到 被 链接 文档 经 过 的 路 径 。 根 目录 相对 路 径 以 
和 斜 线 (/) 开 头 , 表 示 站 点 根 文 件 夹 , 例 如 ,/support/dreamweaver/contents. html 即 是 一 个 
根 目 录 相 对 路 径 。 

由 此 可 见 , 根 目录 相对 路 径 , 同 绝 对 路 径 非常 相似 ,只 是 它 省 去 了 绝对 路 径 中 带 有 协 
议 的 地 址 部 分 。 根 目录 相对 路 径 可 以 看 做 是 绝对 路 径 和 相对 路 径 之 间 的 一 种 折 中 , 它 既 
与 绝对 路 径 的 源 端 点 位 置 无 关 , 也 解决 了 绝对 路 径 在 测试 上 的 麻烦 。 


3. 文档 目录 相对 路 径 


文档 目录 相对 路 径 是 指 以 当前 文档 所 在 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 ,这 种 
方式 同 源 端点 的 位 置 密切 相关 。 以 图 7-86 所 示 的 站 点 为 例 ， 


myweb( 根 目录 ) 

可 以 分 为 以 下 几 种 情况 : support 
GD) 如 果 链 接 中 的 源 端点 和 目标 端点 位 于 同一 个 目录 下 ， = 
则 在 链接 路 径 中 只 需要 指明 目标 端点 的 文档 名 称 即 可 。 例 如 本 


在 图 7-86 中 , 如 果 要 在 contents. html 文档 中 创建 指向 | 
hours. html 文档 的 链接 ,可 使 用 相对 路 径 ; hours. html。 二 Tesources 
图 


(2) 如 果 链 接 指向 的 文档 位 于 当前 目录 的 子 级 目录 中 ,可 tipshtml 
以 直接 输入 目录 名 称 和 文档 名 称 。 例 如 在 图 7-86 中 ,如 果 在 odie 
index. html 文档 中 创建 指向 位 于 support 目录 中 的 contents. 一 图 catalog.html 
html 文档 的 链接 ,可 使 用 相对 路 径 : support/contents. html。 index.html( 首 页 ) 


(3) 如 果 链 接 指向 的 文档 没有 位 于 当前 目录 的 子 级 目录 图 7-86 目录 结构 
中 , 则 可 以 使 用 *.. "符号 来 表示 当前 位 置 的 父 级 目录 ,利用 多 
个 这 样 的 符号 ,可 以 表示 其 更 高 的 父 级 的 目录 ,从 而 构建 出 目录 的 相对 位 置 。 例 如 在 图 
7-86 中 ,如 果 在 catalog. html 文档 中 创建 指向 位 于 support 目录 中 的 contents. html 文 
档 , 可 使 用 相对 路 径 : .. /support/contents. html。 如 果 是 要 在 tips. html 文档 中 创建 指 
向 catalog. html 文档 的 链接 , 则 可 以 使 用 相对 路 径 : . . /.. /products/catalog. html。 

由 此 可 见 , 使 用 相对 路 径 时 ,如 果 站 点 的 结构 和 文档 的 位 置 不 变 , 则 链接 关系 也 就 不 
会 发 生变 化 。 即 使 将 整个 站 点 移植 到 其 他 地 址 的 站 点 中 ,也 不 需要 修改 文档 的 链接 路 径 。 
但 是 ,如 果 修 改 了 站 点 结构 ,或 移动 了 文档 , 则 文档 中 的 相对 链接 关系 就 会 被 破坏 。 


7.5.2 创建 文本 超 链接 


文本 超 链 接 是 网 页 中 最 常见 的 超 链接 ,通过 使 用 鼠标 单 击 文本 即 可 跳 转 到 另 一 个 网 
页 中 。 网 页 中 文本 超 链 接 通 常 具有 以 下 特征 : 

(1) 当 和 鼠标 移 动 到 超 链 接 上 时 ,鼠标 指针 会 变 成 手 形 也 。 

(2) 文本 超 链接 的 文字 下 方 常 常 带 有 下 划 线 。 
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(3) 打开 过 的 文本 超 链接 字体 通常 会 变换 颜色 。 
1. 创建 内 部 文本 链接 


网 站 内 部 链接 是 和 网 站 内 的 网 页 或 者 其 他 文档 建立 的 链接 ,创建 内 部 链接 的 具体 操 
作 如 下 : 

(1) 选中 要 作为 超 链接 的 文本 。 

(2) 单 击 文本 * 属 性 ?面板 中 的 “链接 ”下 拉 列 表 框 后 的 加 按钮 ,或 拖 动 吉 图 标 指向 站 
点 管理 器 中 所 要 链接 的 文件 ,如 图 7-87 所 示 。 


格式 无 样式 | 无 图 Cecss jazr 主 译 泪 下 | 链 拷 eo| 9 
字体 默认 字体 国 ”大 小 无 ” 国 | el 王 生 委 妇 目标 “~ 


图 7-87 文本 “属性 "面板 “链接 ” 栏 


(3) 在 弹出 的 “选择 文件 ”对 话 框 中 选择 要 创建 链接 的 网 页 ,并 在 “相对 于 ”下 拉 列 表 
框 中 选择 “文档 ”选项 ,使 用 文档 相对 路 径 进行 链接 ,完成 设置 后 单 击 “ 确 定 ” 按 钮 ,如 
图 7-88 所 示 。 
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回 _notes 
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oto 和 11 
Tenplates :2 向 huacong2 [Untitled-7 
223-1275023946 国 lvdong Untitled-8 


文件 各 吧 : |00 
详 件 类 型 (D3 | 所 有 文件 〈*.*+) 


RL: 00. htnl 
相对 于 : 文档 Untitled-1. htal 
在 站 点 定义 中 更 改 默认 的 链接 相对 于 


图 7-88 “选择 文件 ”对话 框 


2. 创建 外 部 文件 链接 


网 站 外 部 链接 是 和 本 站 点 以 外 的 网 站 或 者 其 他 文档 建立 的 链接 ,多 用 于 网 站 间 的 友 
情 互联 。 创 建 外 部 链接 的 具体 操作 如 下 : 

(1) 选中 要 作为 超 链 接 的 文本 。 

(2) 直接 在 文本 “属性 ”面板 中 的 “链接 "下列 列表 中 键入 网 址 即 可 ,例如 : http:// 
www. baidu. com。 

注意 : 在 输入 网 址 时 ,必须 输入 完整 的 URL 地 址 ,特别 是 所 使 用 的 协议 (如 http://) 
也 得 加 上 。 
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7.5.3 创建 图 像 超 链接 

对 于 网 页 中 的 图 像 元 素 也 可 以 建立 超 链接 ,使 得 单 击 图 像 也 可 以 打开 指定 对 象 ,同时 
还 可 以 起 到 美化 网 页 的 效果 。 图 像 超 链接 包括 整个 图 片 的 超 链 接 和 热点 链接 两 种 。 

1. 创建 整个 图 像 链 接 


其 创建 方法 与 创建 文本 链接 相同 。 先 选中 要 创建 链接 的 图 像 后 ,在 “属性 ”面板 的 “ 链 
接 ” 下 拉 列 表 框 中 进行 设置 其 链接 路 径 即 可 。 


2. 创建 图 像 热点 链接 


图 像 热 点 链接 是 指 在 一 幅 图 像 上 的 不 同 区 域 设置 多 个 超 链接 。 在 添加 图 像 热 点 链接 
时 ,首先 需 选 择 图 像 ,使 用 如 图 7-89 所 示 的 “属性 ”面板 左下 角 的 热点 创建 工具 进行 热点 
区 域 的 创建 ,然后 分 别 选择 所 创建 的 热点 区 域 ,在 “属性 ”面板 的 “链接 ”文本 框 中 输入 目标 


端点 的 地 址 即 可 。 
Er 寅 500 源 文 件 57ayvcorinz702z. dgE SI 国 类 OO 元 外 
] ”丙酮 话 扶 ]9 己 坊 匀 四 自 对 台 © A 
执 点 地 加 重 让 边 耻 目标 ~ 边民 [ 厂 一 生 竺 下 
了 IT 具 怀 Doal 水 光志 民明 析 度 源 <0)[ 兮 口 对齐 | 由 位 司 


图 7-89 热点 工具 


在 Dreamweaver 8.0 中 ,用 户 可 以 制作 圆 形 .矩形 .不 规则 多 边 形 等 热点 。 下 面具 体 
介绍 一 下 热点 工具 的 功能 。 


范围 。 

(2) 矩形 热点 工具 问 : 用 于 创建 规则 的 矩形 或 正方 形 热点 区 域 。 

(3) 椭圆 形 热点 工具 名 : 用 于 绘制 圆 形 热点 区 域 。 

(4) 多 边 形 热点 工具 时: 用 于 绘制 不 规则 的 热点 区 域 。 

注意 : 一 张 图 像 只 能 创建 普通 链接 或 热点 链接 中 的 一 种 ,如 果 同 一 张 图 像 在 创建 了 
普通 链接 后 又 创建 热点 链接 , 则 普通 链接 失效 ,只 有 热点 链接 才 有 效 。 

【实例 7-5】 利用 图 像 热 点 链接 制作 “ 靓 夏 风 情 ” 热 卖 商品 网 页 ,如 图 7-90 所 示 。 

(1) 新 建 一 个 网 页 。 执 行 “ 插 入 ”一 “表格 ”命令 ,插入 一 个 1 行 1 列 的 、 宽 为 600 像 
素 、 边 框 粗细 为 0 像素 的 表格 ,并 将 表格 设置 为 居中 对 齐 。 

(2) 执行 “插入 ”一 “图 像 ” 命 令 , 插 入 一 张 热 卖 商品 图 片 , 插 入 的 图 片 如 图 7-91 所 示 。 

(3) 选中 图 片 ,在 “属性 ”面板 中 选择 热点 工具 进行 热点 的 制作 ,制作 后 效果 如 图 7-92 
所 示 。 

(4) 对 各 个 热点 设置 相关 链接 。 

(5) 保存 网 页 , 按 F12 键 预览 网 页 , 即 可 直接 单 击 图 片 转 入 相关 商品 的 详细 页 面 中 。 
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| 图 file:///E:/nyweb/ 热 奖 .htn1# 


As59 


图 7-91 插入 图 片 


7.5.4 创建 锚 点 链接 


使 用 锚 点 链接 可 以 实现 源 文档 与 目标 文档 中 指定 部 分 的 快速 跳 转 。 使 用 它 不 仅 可 以 


第 7 章 添加 网 页 元 素 


后 E:Vmyweb\ 获 卖 -htal (XHTIL)+ 
I 


图 7-92 制作 热点 


跳 转 到 其 他 网 页 中 的 指定 位 置 ,还 可 以 跳 转 到 当前 网 页 中 的 指定 位 置 。 
锚 点 链接 的 创建 可 以 分 为 创建 命名 锚 记 和 创建 链接 两 个 部 分 。 


1. 创建 命名 锚 记 


命名 锚 记 可 以 理解 为 目标 端点 ,不 过 它 不 是 整个 网 页 ,而 是 网 页 的 某 一 位 置 。 创 建 命 
名 锚 记 的 具体 操作 步骤 如 下 : 

(1) 将 鼠标 光标 放置 到 要 创建 命名 锚 记 的 位 
置 ,如 页 面 项 部 。 

(2) 执行 “插入 ”一 ”命名 锚 记 ”命令 ,或 单 击 
“常用 ”工具 栏 上 的 “命名 锚 记 ”按钮 别 , 打 开 如 图 7.93 “命名 错 记 "对话 框 
图 7-93 所 示 的 对 话 框 。 

(3) 在 “ 锚 记 名 称 ” 文 本 框 中 输入 锚 的 名 称 ,注意 锚 记 名 称 不 能 含有 空格 。 

(4) 单 击 “确定 ?按钮 ,这 时 可 以 在 文档 窗口 中 看 到 锚 记 符号 而 ,如 果 看 不 到 , 则 执行 
“查看 ”一 可视化 助理 ”一 “不 可 见 元 素 ” 命 令 ,使 之 可 见 。 


2. 创建 链接 


链接 到 命名 锚 记 的 操作 步骤 如 下 : 

(1) 在 网 页 文档 中 选择 要 建立 链接 的 对 象 。 

(2) 在 “属性 ”面板 的 “链接 ”文本 框 中 输入 “# ”符号 ,再 输入 命名 锚 记 的 名 称 。 如 果 
源 端 点 与 锚 记 不 在 同一 个 网 页 文件 中 , 则 应 先 写 上 命名 锚 记 所 在 的 网 页 路 径 及 名 称 , 然 后 
再 加 上 前 组 “# ”和 锚 记 名 称 。 

【实例 7-6】 制作 电子 教程 网 站 ,本 实例 主要 介绍 第 1 章 的 制作 方法 ,如 图 7-94 和 
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图 7-95 所 示 。 
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图 7-95 单 击 目录 后 跳 转 的 页 面 


(1) 新 建 一 个 网 页 。 在 “布局 ?插入 工具 栏 中 单 击 6 
崔 套 的 左 侧 框架 ”选项 ,插入 一 个 框架 .如 图 7-96 所 示 。 

(2) 在 顶部 框架 中 输入 文字 “网 站 开发 与 设计 教程 ”, 在 “属性 ”面板 中 设置 “字体 ”为 
黑体 ,“ 大 小 ”为 64 像素 ,居中 显示 ,如 图 7-97 所 示 。 

(3) 将 鼠标 移 至 左 侧 框 架 , 执 行 “插入 ”一 “表格 ”命令 ,插入 一 个 1 行 9 列 , 宽 为 100% 
的 表格 ,并 输入 章节 目录 ,设置 字体 颜色 为 蓝 色 , 如 图 7-98 所 示 。 
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图 7-97 插入 标题 文字 
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章 网 站 开发 基础 


第 2 章 HIML 语 言 基础 


则 | 3 iADreamreaver so 


| 第 :网 9 排 市 忆 
第 5 章 添 加 网 页 对 全 
第 6 半 使 用 覆 析 和 库 
第 7 重创 建 网 页 特效 
新 s 合 用 Css 直下 
各 5 于 网 站 的 济 汪 发布。 


vy Ctabley Ctr> ray Cp. STmLRSY VO ER 7 


图 7-98 在 左 侧 框架 插入 目录 
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(4) 为 章节 目录 设置 超 链 接 , 选 中 * 第 1 章 网 站 开发 基础 ,在 “属性 ?面板 中 的 “链接 ” 
文本 框 中 输入 part1. html,“ 目 标 ” 下 列 列表 框 中 选择 “mainFrame”, 如 图 7-99 所 示 。 


Be GEE: 


国 |C_ess [= 加 


画 | 司 mr Es je | 


| 第 ? 章 创建 网 页 特效 
村 使 用 css 样式 表 


村 <table7 Ctr> std cp, STYLE32[ 2)] 


图 7-99 设置 链接 


(5) 新 建 一 个 网 页 ,命名 为 partl. html。 执 行 “ 插 入 ”一 “表格 ”命令 ,插入 一 个 2 行 1 
列 , 宽 为 800 像素 的 表格 ,并 居中 显示 ,在 第 1 个 单元 格 中 输入 第 1 章 的 目录 ,在 第 2 格 单 
元 格 中 输入 第 1 章 的 相关 内 容 , 如 图 7-100 所 示 。 


靖 F:\myweb\partl. html (XHTE.) 


de Web 的 纹 富 ;是 尼 条 吉 潜 加 上 是 芝 革 名 如 为 流行 的 二 种 

过 将 位 于 全 世界 Internet 上 不 同 地 失 提 让 有 机 北 编 织 为 用 户 

a i th 
ti t 

区 二 四 人 和 疝 音 等 人间 人 


即 统一 资 源 定位 符 ， 也 就 是 我 们 通常 所 说 的 网 直 。UFL 是 
的 表示 方法 。 一 个 完整 的 URL 地 址 由 协议 名 、Web 服 务 器 地 址 、 文 件 在 服务 器 


: 1 /wmm- ezu- edu. enydjsz/index-htm- 


以 显示 网 页 服务 蜂 或 者 文 性 么 结 的 HTML 文 人 性 内 容 ， 并 让 用 户 与 这 些 文件 广 互 的 一 种 软件 
要 通过 3 人 P 徐 以 与 网 页 服务 安生 天线 取 网 页， 这 些 网 页 由 URL 指 定 ， 文 传 格式 咀 常 力 
"alo -ex5l4. sx72 种 


图 7-100 partl. html 内 容 


(6) 将 鼠标 定位 在 第 2 个 单元 格 中 的 “1. 1 基础 知识 "前 ,执行 “插入 ”一 “命名 锚 记 ” 命 
令 ,插入 一 个 名 为 first 的 命名 锚 记 ,以 此 类 推 , 用 同样 的 方法 为 "1.22“1. 3” 和 “1. 4? 设置 
命名 锚 记 second third 和 fouth, 如 图 7-101 所 示 。 

(7) 选中 第 1 个 单元 格 中 的 目录 ”1. 1 基础 知识 ”, 在 “属性 ”面板 中 的 “链接 ”文本 框 中 
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后 F:wayweb\partl html (XETL)# 本 回国 


kg1. 1 基础 知识 
为 阳 经 直 学 由 后 章节 的 向 容 ， 我 们 首先 业 策 先 了 名和 华 轨 一些 与 同 站 开发 相关 的 基础 知识， 


和 Cn) ; Cy Wide Web 的 凤 中: 由 旷 凡生 种 
服务 工具 ， 它 通 这 将 位 于: 和 据 信息 有 机 地 当 织 在 一 ; 人 


家 | 为 用 
一 种 友好 由 从 局 于 A 么 地 方 二 
的 是 世界 范 轩 的 超级 文本 服务 ， 只 : 要 就 可 以 通过 Internet 从 全 世界 任 
i 国保 和 声 冲 和信 四 


位 符 URL) 

RL 是 Uniform Rescuree Locetor 的 缩写 ， 即 统一 资产 定位 符 ， 也 就 是 我 们 通常 所 说 的 网 址 。UR1 是 
Internet+ 上 用 于 指定 信息 位 置 的 表示 方 ; 个 充 整 的 URL 地 址 由 协议 名 、Web 服 务 器 地 址 、 文 件 在 服务 器 
中 的 路 入 和 文件 名 四 部 分 组 成 。 例 如 : http:/fwww. gzu.edu. cn/djsz/index. htm。 

3. HTHL 


HTML (HyperText Mark-up Lenguage) 即 超 文本 标 | 是 板 虑 同 丰 文 槐 和 二 可 这 i 
是 由 ITIL 市 专 四 成 的 车 壕 主 文 束 ，jT 记 齐 入 可 以 说 明文 字 - 声音 、 表 格 、 链 楼 等 

| 和 巾 包 括 头 部 (Head] 、 主 体 (Body] 两 大 部 分 并 中 区 吉 反 过 放流 总 内 的 信息 ， 而 主体 则 包 生 甩 归 册 时 
的 及 体内 容 。 我 们 将 在 下 一 章 对 BTML 进行 且 体 介绍 . 


是 指 在 网 络 上 ， 根 据 一 定 的 
见 的 在 合 。 管 单 地 说 ， 网 站 是 一 四 入 
人 或 者 利用 网 站 来 提供 相关 | 的 网 入 大多 


图 7-101 设置 命名 


可 


输入 “ #first”, 以 此 类 推 ,为 其 他 目录 设置 链接 ,如 图 7-102 所 示 。 


m n 口 
ee ee SN 
F 回 

四 
上 第 一 章 目录 
[1 基础 知识 
a 
E 1.2 认识 网 站 
3 网 站 的 开发 流程 
1 3 常用 网 页 由 yy” 
耻 ky1, 1 基础 知识 
为 了 更 奸 节 学习 以 后 章节 的 内 容 ， 物 们 首 洁 必须 和 完了 裔 和 警 福 一 些 与 网 站 开 改 相关 的 基础 知识 。 


RE 国 [STYLE2 国 cs js 7 E[sss ktrst eg 
字体 | 昧 认 字 估 加 | 夫 术 |24 ” 国 [ 他 来 cz 国 ， 一 | *rrooo_ 三 日 标 国 | 。 


Ee. 的 是 亿 界 苑 种 的 相 弘 文 末了 服务 ， 愉 用 操纵 电脑 的 人 好， 各 可 性 通过 Internet 从 全 包 算 全 
Hing 图 像 和 声音 等 信 , 


A 即 统 
个 充 : 


人 URL 是 Uniform Resource Locet 

旨 半 可 训 二 二 下 让 这 十 们 五 的 京东 

中 的 路 径 
著作 


.HTML (HypexTe3t Mark-up Lonsuaes) 即 超 文本 标记 语言 ， 是 格 成 网 页 文档 的 主要 语言 。HTHL 文 本 图 
全 Si Vv hoo -ao | 


图 7-102 设置 锚 点 链接 


站 位 人 也 就 是 我 们 和 通常 所 说 的 网 址 。URL 是 
RL 和 名 、Web 服 务 器 地 址 、 文 件 在 服务 器 


ridex. htm。 


(8) 在 每 节 内 容 结 束 处 创建 一 个 “返回 目录 ”的 锚 点 链接 。 将 鼠标 定位 在 “目录 ” 
文字 后 ,执行 “插入 ”一 “命名 锚 记 ”命令 ,插入 一 个 名 为 mulu 的 命名 锚 记 ,如 图 7-103 
所 示 。 

(9) 将 鼠标 定位 在 每 节 内 容 结 束 处 ,执行 “插入 ”一 “媒体 ”一 “Flash 按钮 ”命令 ,在 弹 

出 的 “Flash 按钮 对话 框 中 进行 设置 ,如 图 7-104 所 示 。 

(10) 单 击 “ 确 定 ” 按 钮 ,完成 “返回 目录 ” 锚 点 链接 的 建立 。 其 效果 如 图 7-105 和 

图 7-106 所 示 。 
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sl.1 基础 


dr ssuee nns, 我 们 首先 必须 先 了 髓 和 掌握 一 些 与 网 站 开发 相关 的 基 
六 本 

维 网 ( ea) le Web| 目前 Intcrnct 上 最 受 欢迎 、 最 

的 人 和 和 ue he + 上 不 同 地 站 区 信息 

了 有 机 | 一 起 ， 为 用 户 棍 供 了 一 种 友好 的 信息 理 向 楼 口 有 用 和 信 癌 可由 总 各 请 

站 如 何 查 询 则 由 mW 自动 充 成 。 因此， TRW 举 求 的 是 过 国 的 超级 文本 服务 

只 到 操 鼠标 ， 就 可 以 通过 Interne 1 从业 作 四 全 从 请 宁 所 党 刘 得 汉 的 文 末 ， 
法 网 入 汪汪 和 辟 
boavy crobl ey <tr> ta cp SryLE1> MONIom -txt rE/l 和 Ds 


图 7-103 插入 目录 命名 锚 记 


插入 Flash 按钮 


Generic-Gold 
Generic-Ruby 
Glass-Purple 


Class-Turquoise 
INavigation-Next (Green) 


hs vr cotnie 国 2 


Stnulu 浏览 ,，. 


button8,svf 


图 7-104 插入 “返回 目录 ”Flash 按钮 


7.5.5 创建 电子 邮件 链接 


电子 邮件 链接 是 一 种 特殊 的 链接 ,使 用 电子 邮件 链接 可 以 方便 地 进行 电子 邮件 的 发 
送 。 在 浏览 器 中 单 击 邮件 链接 时 ,将 启动 默认 的 邮件 发 送 程序 ,在 电子 邮件 消息 窗口 中 ， 
“ 收 件 人 ” 域 自动 更 新 为 显示 电子 邮件 链接 中 指定 的 地 址 。 利 用 菜单 命令 创建 电子 邮件 链 
接 的 操作 步骤 如 下 : 

(1) 将 鼠标 光标 放置 需要 插入 电子 邮件 链接 的 位 置 。 

(2) 执行 “插入 ”电子 邮件 链接 ”命令 ,或 单 击 “ 常 用 ?工具 栏 中 的 “电子 邮件 链接 ” 
按钮 回 ,打开 * 电 子 邮 件 链接 ?对 话 框 , 如 图 7-107 所 示 。 

(3) 在 “文本 ”文本 框 中 输入 邮件 链接 要 显示 在 页 面 上 的 文本 ,在 E-mail 文本 框 中 输 
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网 站 开发 与 设 


E -me 
文件 (ED 护 缮 (二 查看 (DD) 要 语 (4) 工 琴 (D 吉 劲 QU) 


回扣- 日- 国 国 的 P 妆 认 类 x 如 | 全 -加 加 -和 通 


.1 基础 知识 

为 本 更 好 地 学 习 以 后 章节 的 内 容 ， 息 们 首先 必须 先 了 解 和 洗 握 一 些 与 网 站 开发 相关 
的 基础 知识 。 

万 维 网 《WWW7 

万 维 网 〈 简 称 WWW 或 38) ， 是 World 及 de Wcb 的 缩写 ， 是 目前 Internet 上 景 受 欢 迎 、 
| 最 为 流行 的 一 种 信息 检索 服务 工具 ， 它 到 i 于 全 世界 Internet 上 不 同 地 点 的 相关 数 
颅 1 机 地 编织 在 一 起 ， 为 用 户 提供 了 一 种 友好 的 信息 查询 伟 口 ， 即 用 户 仅 珊 提出 查 
浆 要 求 ， 而 到 什么 地 方 查询 及 如 何 查询 则 由 mW 自动 完成 因此， 内 来 的 是 世界 范围 
的 超 航 立 本 服务 ， 只 要 操纵 电脑 的 饼 标 ， 就 可 以 通过 Internet 从 全 世界 任何 地 方 调 求 扬 
辐 望 得 到 的 文本 、 图 像 和 声音 等 信息 。 

3， 统一 资源 定位 符 《〈URL》 

骂 L 是 Uniform Rescurce Lacator 的 缩写 ， 即 统一 资源 定位 符 ， 也 就 是 我 们 通常 所 说 
的 网 址 。URL 是 Internet 上 用 于 指定 信息 位置 的 表示 方法 。 一 个 完整 的 URL 地 址 由 协议 
出、Web 服 务 器 地 址 、 文 件 在 服务 器 中 的 路 径 和 文件 名 四 部 分 组 成 。 例 如 : 
ttp: /arw. gz edu. cn/djsz/index htn, 

3、HTML 

HTML (HyperText Merk-up Language》 即 超 文 本 标记 语言 和 
匡 ， ee HTML 命 令 可 以 说 明文 字 、 


ee 而 主 作风 包 合 所 要 说 明 的 具体 内容 。 我 们 将 在 下 一 章 对 


PTML 进 行 具体 介绍 、 


名 第 一 章 - 星 crosoft Internet Explorer 
文件 人 搞 插 人 E) 查看 QD) 收 幕 从 ) 工具 (T) 才 财 Gd) 


四 三 -日 - 国 国 约 迭 认 旺 x 全 | 全 "总 


EEE) ME \nyveb\partl. htsl 
第 1 章 目录 


1.1 基础 知识 


1.2 认识 网 站 
1.3 网 站 的 开发 流程 
1.3 常用 网 页 制作 相关 软件 
1.1 基础 知识 


为 了 更 好 地 学 习 以 后 音节 的 内 容 ， 我 们 首先 必须 先 了 解 和 掌握 一 些 与 网 站 开发 相关 
的 基础 知识 。 

1 万 维 网 《WWN》 

万 维 网 前 称 WWW 或 8) ， 是 World ， 是 月 前 Internet 上 最 爱 欢迎 、 
慰 为 流行 的 一 种 信息 检索 服务 工具 ， 它 ; 老人 Internet 上 不 同 地 点 的 相关 数 
鼎 信 息 有 机 地 编织 在 一 起 ， 为 用 产 提 供 了 一 种 友好 介 信 息 宫 过 站 即 用 户 仅 需 捍 出 查 

要 求 ， 而 到 什么 地 方 查询 及 如何 查 询 则 由 mW 让 动 完 成 。 因 此，WW 带 来 的 是 世界 范围 
的 超级 文本 服务 ， 只 要 操纵 电脑 的 鼠标 ， 就 可 以 通过 Internet 从 全 世界 任何 地 方 证 来 所 
若 望 得 到 的 文本 、 图 像 和 声音 等 信息 。 

2， 统 一 资源 定位 符 《URL》 


图 7-106 单 击 后 返回 目录 


电子 邮件 链接 


图 7-107 “电子 邮件 链接 ”对 话 框 


计 教 程 


人 要 链接 的 邮箱 地 址 。 

(4) 单 击 “确定 ”按钮 ,邮件 链接 就 加 到 了 当前 文档 中 。 

另外 还 可 以 直接 使 用 “属性 ”面板 创建 电子 邮件 链接 ,其 方法 是 先 选 中 要 作为 邮件 链 
接 的 文本 或 对 象 ,在 “属性 ”面板 的 “链接 ”文本 框 中 , 先 输入 mailto: ,然后 再 跟 电子 邮件 地 
址 ,注意 在 冒号 和 电子 邮件 地 址 之 间 不 能 输入 任何 空格 ,例如 : mailto:yoyo@126. com。 


7.5.6 创建 下 载 链接 和 音乐 链接 


1. 创建 下 载 链接 


当 用 户 希 望 浏览 者 从 自己 网 站 上 下 载 资料 时 ,就 需要 为 文件 提供 下 载 链 接 。 下 载 链 
接 是 指 单 击 某 个 超 链接 时 会 打开 一 个 “文件 下 载 ” 对 话 框 ( 或 自动 启动 下 载 工 具 ) ,通过 在 
该 对 话 框 中 单 击 “打开 ?或 “保存 "按钮 ,可 以 打开 或 下 载 文件 。 下 载 链接 一 般 是 指向 压缩 
文件 (文件 扩展 名 为 . rar 或 . zsip) 和 可 执行 文件 (文件 的 扩展 名 为 . exe 或 . com) 等 。 其 创 
建 方法 为 : 在 文档 中 选中 指示 下 载 文 件 的 对 象 ,然后 单 击 * 属 性 ?面板 中 的 “链接 ”文本 框 
右 侧 的 “浏览 ”按钮 ,打开 “选择 文件 ”对 话 框 ,在 该 对 话 框 中 选择 要 链接 的 文件 , 单 击 “ 确 
定 ” 按 钮 即 可 建立 下 载 链接 。 


2. 创建 音乐 链接 


在 网 页 中 不 但 可 以 添加 背景 音乐 ,还 可 以 在 网 页 中 添加 音乐 链接 。 其 添加 方法 为 ， 
先 选中 要 创建 音乐 链接 的 对 象 , 然 后 在 “属性 ?面板 的 “链接 ?文本 框 中 选择 音乐 文件 即 可 
添加 音乐 链接 。 


7.5.7 创建 空 链接 


空 链接 是 指 未 指定 目标 端点 的 链接 , 即 单 击 后 不 进行 任何 的 跳 转 。 如 果 要 为 网 页 文 
本 或 图 像 添 加 脚本 代码 或 实现 一 些 特殊 的 功能 , 则 需要 添加 空 链接 。 其 创建 方法 为 : 选 
择 要 添加 空 链 接 的 对 象 ,在 “属性 ”面板 中 的 “链接 ”文本 框 中 输入 “#” 符 号 或 
“javascript: ;” 即 可 。 

说 明 : 当 单 击 利用 " 井 ” 符 号 创建 的 空 链接 时 ,页 面 会 跳 转 到 网 页 文件 的 顶端 ,但 单 击 
利用 “javascript:;” 来 创建 的 空 链接 , 则 可 以 避免 这 种 情况 的 出 现 ,网 页 内 容 将 保持 原来 
的 位 置 不 变 。 


7.5.8 创建 脚本 链接 


脚本 链接 执行 JavaScript 代码 或 调用 JavaScript 函数 , 它 非常 有 用 ,能 够 在 不 离开 当 
前 网 页 的 情况 下 ,为 访问 者 提供 有 关 某 项 的 附加 信息 ,脚本 链接 还 可 用 于 在 访问 者 单 击 特 
定 项 时 ,执行 计算 、 表 单 验证 和 其 他 处 理 任务 。 
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创建 脚本 链接 的 方法 是 : 选择 要 创建 脚本 链接 的 对 象 ,在 “属性 ”面板 中 的 “链接 ” 文 
本 框 中 输入 “JavaScript:”, 后 面 跟 一 些 JavaScript 代码 或 函数 调用 。 

例如 : javascript: window. Close( ) 表 示 关 闭 当 前 窗口 ;javascript: alert("…") 表示 
弹出 提示 对 话 框 。 


7.5.9 创建 导航 条 


导航 条 一 般 由 一 幅 或 一 组 图 像 组 成 ,这 些 图 像 的 显示 内 容 随 用 户 的 操作 不 同 而 进行 
相应 的 变化 。 导 航 条 为 访问 者 浏览 不 同 网 页 提供 了 一 条 捷径 。 导 航 条 的 图 像 分 别 代表 以 
下 4 种 状态 。 

(1) 一 般 : 用 户 尚未 单 击 或 尚未 与 此 项 目 交互 时 所 显示 的 初始 图 像 。 

(2) 滑 过 : 指 鼠 标 指针 从 图 像 上 经 过 时 出 现 的 图 像 。 

(3) 按 下 : 单 击 导航 条 图 像 时 显示 的 图 像 。 

(4) 按 下 时 鼠标 经 过 : 单 击 图 像 后 , 当 鼠 标 指针 经 过 该 图 像 时 显示 的 图 像 。 


1. 插入 导航 条 


要 在 网 页 中 插入 导航 条 ,可 以 执行 “插入 ”一 “图 像 对 象 ”>“ 导 航 条 ”命令 ,打开 “插入 
导航 条 ”对 话 框 ,如 图 7-108 所 示 。 


图 7-108 “插入 导航 条 ”对 话 框 


在 “插入 导航 条 ”对 话 框 中 ,各 选项 的 功能 如 下 所 述 。 

(1) 于 | 按钮 和 | 辐 | 按 钮 : 单 击 | 于 | 按钮 ,将 在 “导航 条 元 件 " 文 本 框 中 添加 一 个 菜单 项 ; 
选 定 一 个 菜单 项 ,然后 单 击 [=| 按 钮 可 以 将 其 删除 。 

(2) [全 | 按钮 和 | 要 | 按钮 : 使 用 该 箭头 按钮 可 以 使 菜单 项 在 列表 中 向 上 或 向 下 移动 。 

(3) 项 目 名 称 : 用 来 输入 导航 条 项 目的 名 称 。 

(4) 状态 图 像 : 单 击 “ 浏 览 "按钮 选择 最 初 将 显示 的 图 像 。 此 项 为 必需 项 ,其 他 图 像 
状态 选项 为 可 选项 。 
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(5) 鼠标 经 过 图 像 : 单 击 * 浏 览 "按钮 选择 用 户 指 针 滑 过 状态 图 像 时 所 显示 的 图 像 。 

(6) 按 下 图 像 : 单 击 * 浏 览 "按钮 选择 用 户 单 击 状态 图 像 后 显示 的 图 像 。 

(7) 按 下 时 鼠标 经 过 图 像 : 单 击 “浏览 ?按钮 选择 当 用 户 将 鼠标 指针 滑 过 按 下 图 像 所 
显示 的 图 像 。 

(8) 蔡 换文 本: 用 来 输入 导航 条 项 目的 描述 性 名 称 。 

(9) 按 下 时 ,前 往 的 URL: 用 来 输入 导航 条 项 目 对 应 的 链接 地 址 。 

(10) 预先 载 和 人 图像: 当 页 面 初始 下 载 时 ,将 图 像 预先 下 载 。 如 果 不 选 定 此 复 选 框 ， 
当 鼠 标 移 过 初始 图 像 时 ,在 显示 “鼠标 经 过 图 像 * 时 将 会 延迟 。 

(11) 页 面 载 和 人 时 就 显示 “鼠标 按 下 图 像 *: 选中 该 复 选 框 ,可 在 显示 页 面 时 ,以 按 下 

(12) 插入 : 用 来 选择 在 文档 中 是 垂直 插入 还 是 水 平 插入 导航 条 项 目 。 

注意 : 一 个 网 页 中 只 允许 有 一 个 导航 条 ,如 果 再 次 插入 时 Dreamweaver 8. 0 会 出 现 
提示 ,如 图 7-109 所 示 。 


Hacrome dia Dreamweaver Xx 


八 “ 和 本 击 此 页 中 已 经 有 了 ， 


图 7-109 ”提示 对 话 框 


2. 编辑 导航 条 


执行 “修改 ”一 “导航 条 ”命令 ,可 以 对 已 经 插入 的 导航 条 进行 编辑 。 在 打开 的 如 
图 7-110 所 示 的 “修改 导航 条 ”对 话 框 中 可 以 增加 和 删除 导航 条 元 件 、 改 变 导 航 条 元 件 出 
现 的 先后 顺序 、 向 导航 条 添加 图 像 ,或 从 导航 条 删除 图 像 ,还 可 以 更 改 图 像 或 图 像 组 ， 


seile: ///El/avredb/ing/4. 8/4.1/0d [| 浏览... 
Seile:///El /nvveb/ing/4. 8/4.1/0d | 浏览 ... 
浏览 
浏览 ... 


Savascript:; ] [浏览 ...] in | 主 窗口 器 


选项 : 加 预 光 载 和 图 做 
口 初 始 时 显示 “鼠标 拉 下 图 像 ” 


图 7-110 “修改 导航 条 ”对 话 框 


注意 : 导航 条 的 “水 平 " 和 “垂直 ”状态 只 有 在 第 一 次 插入 的 时 候 设 定 ,编辑 导航 条 时 
无 此 选项 。 


第 7 章 添加 网 页 元 素 


7.5.10 创建 跳 转 菜单 


跳 转 菜单 相当 于 一 组 超 链接 的 集合 ,在 网 页 中 显示 为 弹出 式 下 拉 菜 单 , 如 图 7-111 所 
示 。 弹 出 菜单 内 的 链接 没有 类 型 上 的 限制 ,可 以 是 内 部 链接 ,也 可 以 


是 其 他 网 站 的 链接 ,还 可 以 是 电子 邮件 链接 或 命名 错 记 链接 。 二 和 
创建 跳 转 菜单 的 具体 操作 步骤 如 下 ， 有 
(1) 将 鼠标 光标 置 于 网 页 中 要 插入 跳 转 菜单 的 位 置 。 中 大 


(2) 执行 “插入 ”一 “表单 ”>“ 跳 转 菜单 ”命令 ,或 单 击 “ 表 单 " 常 
用 工具 栏 中 的 “ 跳 转 菜单 ”按钮 国 .弹出 “插入 跳 转 菜 单 ” 对 话 框 ,如 
图 7-112 所 示 。 在 “文本 ”编辑 框 中 输入 菜单 名 称 , 如 “清华 大 学 ”*"。 在 “选择 时 , 转 到 
URL” 编 辑 框 中 输入 菜单 要 链接 到 的 网 址 ,如 http://www. tsinghua. edu. cn。 这 样 一 个 
菜单 项 就 创建 完成 了 。 


插入 跳 转 荣 单 


图 7-111 跳 转 菜单 


锯 回 


图 日 


文 相 mL | 


选择 时 ， 转 到 URL: 浏览 . . 。 


打开 URL 秆 :| 主 窗口 国 
荣 单 名 称 : nenu2 
选项 ; 口 莱 单 之 后 插入 前往 按钮 
口 更 改 URL 后 选择 第 一 个 项 目 


图 7-112 “插入 跳 转 菜单 "对 话 框 


对 话 框 中 其 他 项 的 含义 如 下 所 述 。 

Q@ 菜单 项 : 用 来 列 出 所 有 创建 的 菜单 项 。 

@ 打开 URL 于 : 用 来 设置 跳 转 菜单 项 链接 目标 的 窗口 打开 方式 。 

@ 菜单 名 称 : 用 来 设置 跳 转 菜单 名 称 。 

@ 菜单 之 后 插入 前 往 按钮 : 选中 该 项 ,会 在 跳 转 菜单 的 后 面 添 加 一 个 “前 往 ” 按 钮 
苇 国 。 当 浏览 者 在 下 拉 菜 单 中 选择 了 相关 项 后 ,必须 单 击 该 按钮 才 可 以 打开 链接 网 页 。 
如 果 不 选择 此 项 , 则 单 击 菜单 项 即 可 直接 打开 链接 网 页 。 

@ 更 改 URL 后 选择 第 一 个 项 目 : 选中 该 项 , 跳 转 后 可 以 重新 定义 第 一 个 选项 为 默 

(3) 单 击 | 于 | 按钮 ,为 跳 转 菜单 添加 其 他 项 ,并 按 步骤 (2) 的 方法 设置 文本 和 链接 地 
址 ,最 后 单 击 “ 确 定 ” 按 钮 ,完成 跳 转 菜 单 的 创建 。 

说 明 : 跳 转 菜单 中 的 菜单 项 必须 为 两 个 以 上 ,否则 跳 转 功能 不 会 实现 。 
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7.5.11 设置 链接 属性 


1. 设置 链接 文本 样式 


创建 链接 的 文本 一 般 都 是 蓝 色 并 带 有 下 划 线 ,如 果 觉 得 太 单调 ,不 美观 ,可 以 自 定 义 
链接 文本 样式 。 本 节 主 要 介绍 通过 设置 文档 的 页 面 属性 来 定义 链接 文本 的 样式 ,具体 操 
作 步 骤 如 下 : 

(1) 执行 “修改 ”>“ 页 面 属性 ”, 打 开 “ 页 面 属性 ”对 话 框 。 

(2) 在 “分 类 ”列表 框 中 选择 “链接 "类别 ,再 根据 需要 对 各 项 参数 进行 设置 ,如 
图 7-113 所 示 。 各 项 参数 的 具体 含义 如 下 所 述 。 


《 同 页 面 字 体 》 


: 国 [ 
Bi | 
始终 有 下 划 线 


图 7-113 “链接 "样式 参数 


@ 链接 字体 : 设置 链接 文本 的 字体 类 型 。 

@ 大 小 : 设置 链接 文本 的 字体 大 小 。 

@ 链接 颜色 : 设置 应 用 于 链接 文本 的 颜色 。 

@ 已 访问 链接 : 设置 应 用 于 访问 过 的 链接 的 颜色 。 

@ 变换 图 像 链接 : 设置 当 鼠 标 位 于 链接 上 时 应 用 的 颜色 。 
@ 活动 链接 : 设置 当 鼠 标 在 链接 上 单 击 时 应 用 的 颜色 。 
@ 下 划 线 样式 : 设置 应 用 于 链接 的 下 划 线 样式 。 


2. 设置 目标 窗口 打开 方式 


目标 窗口 就 是 单 击 超 链 接 后 ,该 链接 所 指 内 容 显示 的 窗口 。 在 Dreamweaver 8. 0 中 
可 以 利用 “属性 ”面板 中 的 “目标 ”选项 为 目标 窗口 设置 不 同 的 打开 方式 ,有 如 下 4 种 选项 。 

(1) _blank: 表示 在 保留 当前 网 页 窗口 的 状态 下 ,在 新 窗口 中 显示 被 打开 的 链接 
网 页 。 
(2) _parent: 表示 在 当前 窗口 显示 被 打开 的 链接 网 页 。 如 果 是 框架 网 页 , 则 在 父 框 
架 中 显示 被 打开 的 链接 网 页 。 

(3) _self: 表示 在 当前 窗口 显示 被 打开 的 链接 网 页 。 如 果 是 框架 网 页 , 则 在 当前 框 
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架 中 显示 被 打开 的 链接 网 页 。 

(4) _top: 表示 在 当前 窗口 显示 被 打开 的 链接 网 页 。 如 果 是 框架 网 页 , 则 删除 所 有 框 
架 , 显 示 当 前 网 页 。 

【实例 7-7】 创建 多 彩 链接 。 一 般 情况 下 链接 的 文本 颜色 都 是 蓝 色 ,而 且 都 带 有 下 
划 线 ,使 整个 网 页 显得 很 杂乱 。 通 过 设置 链接 属性 ,使 链接 文本 的 颜色 变 成 其 他 颜色 ,而 
且 当 浏览 者 访问 链接 时 ,文字 会 自动 改变 颜色 ,同时 出 现下 划 线 。 

(1) 新 建 一 个 网 页 文件 ,执行 “插入 ”一 “表格 ”命令 ,插入 一 个 1 行 5 列 , 宽 为 600 像 
素 的 表格 ,居中 对 齐 显示 ,在 “属性 ”面板 中 设置 “填充 "和 “间距 ”分 别 为 1 和 2, 如 图 7-114 
所 示 。 


卢 下:\myweb\ 多 彩 链接 .html (XHTIL) 
Ey PTT PT PP TP 


图 7-114 插入 表格 


(2) 将 鼠标 光标 移 至 表格 左 侧 的 单元 格 中 ,执行 “插入 ”一 “表格 ”命令 ,插入 一 个 1 行 
1 列 的 嵌 套 表格 。 然 后 在 “属性 ?面板 中 将 嵌 套 表格 的 “ 宽 ” 和 "高 分别 设置 为 100% 与 25 
像素 ,将 “填充 ”“ 间 距 ”"“ 边 框 ” 全 部 设置 为 0, 将 “背景 颜色 ”设置 为 红色 ,如 图 7-115 
所 示 。 


语 FE: \myweb\ 多 彩 链接 .html (XHTIL)# 上 -器 Xl 


EL 
| 
| 
| 
| 


Id 三 客 hoo jx 国 填充 对 齐 | 默认 
E] 列 [ 高 zs  ] 侯 来 国 | i 边框 
背景 颜色 地 | erroooo 边框 颜色 [ | 


图 7-115 插入 嵌 套 表格 
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(3) 依次 在 表格 的 其 余 单元 格 中 插入 一 个 1 行 1 列 的 嵌 套 表格 ,然后 在 “属性 ?面板 
中 将 嵌 套 表格 的 “ 宽 " 和 “高 ”分 别 设置 为 100% 与 25 像素 ,将 “填充 *“ 间 距 "“ 边 框 ?全 部 
设置 为 0, 将 “背景 颜色 ”设置 为 红色 ,如 图 7-116 所 示 。 


链接 . htm | 


3 1 1 1 1 1 1 1 1 1 4 1 4 


Kbodv> "oo ~]esollsen 


图 7-116 插入 嵌 套 表格 


(4) 分 别 在 插入 的 拭 套 表格 中 输入 文本 ,文本 大 小 为 16 像素 ,颜色 为 黑色 ,居中 对 齐 
显示 ,如 图 7-117 所 示 。 


图 7-117 输入 文本 


(5) 依次 选择 嵌 套 表格 中 的 文本 ,在 “属性 ?面板 上 的 “链接 ”文本 框 里 输入 " 井 ”号 ,为 
文本 创建 空 链接 。 这 时 可 以 看 到 文本 颜色 变 为 蓝 色 ,并 出 现 了 下 划 线 ,如 图 7-118 所 示 。 

(6) 执行 “修改 ”>“ 页 面 属性 ”命令 ,弹出 “页 面 属性 ”对 话 框 ,在 “分 类 ”列表 中 单 击 
“链接 ”选项 ,将 “链接 颜色 ”与 “已 访问 链接 ”的 颜色 都 设置 为 白色 ,将 “变换 图 像 链 接 ” 的 颜 
色 设 置 为 绿色 。 然 后 在 下划线 样式 ”下 拉 列 表 框 中 选择 “ 仅 在 变换 图 像 时 显示 下 划 线 ” 选 
项 ,如 图 7-119 所 示 。 

(7) 单 击 “ 确 定 ” 按 钮 ,完成 链接 属性 设置 。 按 F12 键 预览 网 页 ,显示 效果 如 图 7-120 
所 示 。 
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(XHTHL)# 


《 同 页 面 字 体 》 
lw 
:Jrrrrrs | 实 扫 田代 内 E): 国 | 
[ltrrrrrr 活动 针 拉 (全 J 


#0CFFOO 


图 7-119 “页 面 属 性 ”对 话 框 


EE - Mi crosoft Internet Ezplorer [OIX| 
文件 全 ) 编辑 (E) 查看 (Y) 收藏 4) 工具 (T) 帮助 (H) [3 


@ 硬 .昌国 国 的 | Pig 六 Wx @| 信 "加 加 -地 


指 赴 国 检 E:\nyweb\ 多 彩 链接 . htal 加 


LE | ra EE EE 


图 7-120 链接 效果 显示 
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1, 


一 、 选 择 题 

在 网 页 中 最 常用 的 图 像 格 式 是 
A. BMP 和 TIF B. JPG 和 BMP 
C. GIF 和 TIF D. JPG 和 GIF 

. 要 通过 快捷 键 为 文本 添加 不 换行 空格 ,可 以 按 组 合 键 。 
A. Ctrl 十 Enter B. Ctrl 十 Space 
C. Ctrl 十 Shift 十 Space D. Ctrl 十 Shift 十 Enter 

. 在 Dreamweaver 8. 0 中 可 以 通过 功能 来 制作 类 似 幻灯 片 的 图 片 转换 。 


8. 


是 


A. Flash 动画 B. Flash 按钮 C.Flash 文本 D. Flash 元 素 


. 下 列 关于 表单 的 说 法 不 正确 的 一 项 是 


A. 表单 对 象 可 以 单独 存在 于 表单 域 之 外 

B. 表单 中 包含 各 种 表单 对 象 , 例 如 文本 域 .列表 、 复 选 框 和 单 选 按钮 
C. 表单 即 表单 对 象 

D. 表单 由 两 部 分 组 成 , 即 表单 域 和 表单 对 象 


. 在 一 个 网 站 中 ,路 径 的 表现 方式 分 别 是 


A. 绝对 路 径 、 根 目录 相对 路 径 
B. 绝对 路 径 、 根 目录 绝对 路 径 .文档 目录 相对 路 径 
C. 绝对 路 径 、 根 目录 绝对 路 径 
D. 绝对 路 径 、 根 目录 相对 路 径 、 文 档 目录 相对 路 径 


. 下 列 关 于 绝对 路 径 的 叙述 中 ,正确 的 一 项 是 


A. 绝对 路 径 是 被 链接 文档 的 完整 URL， 不 包括 使 用 传输 协议 
B. 使 用 绝对 路 径 时 需要 考虑 到 源 文件 的 位 置 

C. 创建 外 部 链接 时 ,必须 使 用 绝对 路 径 

D. 在 绝对 路 径 中 ,如 果 目 标 文件 被 移动 , 则 链接 同样 可 用 


. 设置 超 链接 属性 时 ,目标 栏 设置 为 _blank 时 ,表示 的 是 


A. 会 在 当前 窗口 的 父 窗口 中 打开 链接 

B. 会 在 新 的 窗口 中 打开 链接 

C. 会 在 当前 窗口 中 打开 链接 

D. 会 在 当前 浏览 器 在 最 外 层 打开 链接 

在 Dreamweaver 8. 0 中 使 用 表单 ,下 面 功能 中 不 属于 文本 框 可 以 实现 的 


A. 可 以 输入 E-mail 地 址 的 地 址 框 
B. 密码 框 
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C. 可 以 输入 大 量 文字 的 多 行文 本 框 
D. 单 击 “ 浏 览 ?按钮 在 硬盘 上 寻找 相应 文件 


二 、 操 作 题 


1. 应 用 在 本 章 中 学 到 的 知识 ,完成 当 鼠 标 移 至 图 像 时 显示 另 一 幅 图 像 的 效果 。 

2. 创建 一 个 网 站 相册 ,然后 为 其 添加 背景 音乐 。 

3. 在 实例 7-6 的 基础 上 ,在 每 节 内 容 后 添加 “上 一 节 ”“ 下 一 节 ” 和 “返回 目录 ”按钮 ， 
并 实现 跳 转 。 
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使 用 模板 和 库 


模板 和 库 可 以 提高 网 站 创建 与 更 新 效率 。 在 网 页 制作 过 程 中 ,为 了 整体 风格 统一 ， 
很 多 页 面 会 用 到 相同 的 布局 .图 片 和 文字 等 元 素 。 为 了 避免 一 次 次 重复 劳动 ,可 以 使 
用 Dreamweaver 8. 0 提供 的 模板 和 库 的 功能 ,将 具有 相同 版 面 结构 的 页 面 制作 成 模板 ， 
将 相同 的 元 素 ( 如 版 权 信息 ) 制 作为 库 项 目 , 存 放 在 站 点 中 以 供 随时 调用 ,这 样 能 够 帮 
助 网 页 设计 者 快速 制作 大 量 相 似 的 网 页 ,并 能 够 方便 地 修改 应 用 了 模板 和 库 的 所 有 
网 页 。 


本 章 学 习 要 点 : 


。 模 板 和 库 的 作用 
。 创建 模板 和 库 
。 使 用 模板 和 库 


8.1 模 板 


模板 是 一 种 将 较 好 的 格式 保留 以 备 反复 使 用 的 文件 ,其 扩展 名 为 . dwt, 并 存放 在 本 
地 站 点 的 templates 文件 夹 中 ,该 文件 夹 只 有 在 创建 模板 的 时 候 才 会 自动 生成 。 注 意 创 
建 模 板 之 前 一 定 要 先 建立 站 点 。 

模板 文件 最 显著 的 特征 就 是 存在 可 编辑 区 域 和 锁定 区 域 之 分 。 锁 定 区 域 主要 用 来 锁 
定 体 现 网 站 风格 部 分 ,因为 在 整个 网 站 中 这 些 区 域 是 相对 固定 、 独 立 的 , 它 可 以 包括 网 页 
背景 .导航 菜单 、 网 站 标志 等 内 容 。 而 可 编辑 区 域 则 是 用 来 定义 网 页 具体 内 容 部 分 ,它们 
是 区 别 网 页 之 间 最 明显 的 标志 ,因为 网 页 的 内 容 必定 是 不 相同 的 ,在 整个 网 站 中 可 编辑 区 
域 的 内 容 是 相对 灵活 的 ,可 以 随时 修改 具体 内 容 。 


8.1.1 创建 模板 


在 Dreamweaver 8. 0 中 可 以 将 现 有 的 网 页 文档 创建 为 模板 ,然后 根据 需要 加 以 修改 ， 
或 者 创建 一 个 空白 模板 ,在 其 中 输入 需要 显示 的 文档 内 容 。 


1. 将 现 有 的 文档 保存 为 模板 


将 现 有 的 文档 保存 为 模板 的 操作 步骤 如 下 : 

(1) 打开 要 保存 为 模板 的 文件 。 

(2) 执行 “文件 ”一 “另存 为 模板 ”命令 , 打 
开 “ 另 存 为 模板 ”对 话 框 ,如 图 8-1 所 示 。 

(3) 单 击 “ 站 点 ” 右 侧 的 下 拉 按 钮 ,在 弹出 
的 下 列 列表 框 中 选择 一 个 站 点 名 称 ;在 “现存 


的 模板 ”中 将 显示 当前 系统 中 存在 的 模板 ;在 2 本 
“另存 为 ” 右 侧 的 文本 框 中 输入 新 建 的 模板 
名 称 。 图 8-1 “另存 为 模板 "对话 框 


(4) 单 击 “ 保 存 ” 按 钮 ,完成 模板 的 保存 。 
2. 创建 空白 模板 


在 Dreamweaver 8.0 中 还 有 另外 一 种 创建 模板 的 方法 ,就 是 直接 创建 新 的 空白 模板 。 
其 方法 与 创建 普通 网 页 相似 ,执行 “文件 ”一 “新 建 "命令 ,在 打开 的 “新 建文 档 ” 对 话 框 中 选 
择 “ 类 别 ” 列 表 中 的 “基本 项 ”选项 ,然后 从 “基本 页 ”列表 中 选择 “HTML 模板 ”, 单 击 “ 创 
建 ? 按 钮 ,如 图 8-2 所 示 , 就 可 以 建立 一 个 空白 模板 。 


新 建文 档 


页 
页 面 设 计 《 有 转 助 功 通 的 》 


文档 类 型 DoTD) : 
|XHTHL 1.0 Transiticnal 


图 8-2 “新 建文 档 " 对 话 框 


8.1.2 定义 模板 区 域 


模板 中 有 些 区 域 是 不 能 编辑 的 , 称 为 锁定 区 ;有 些 区 域 则 是 可 以 编辑 的 , 称 为 可 编辑 
区 。 通 过 编辑 可 编辑 区 中 的 内 容 ,可 以 得 到 与 模板 相似 但 又 有 所 不 同 的 新 网 页 。 
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Dreamweaver 8.0 提供 了 4 种 模板 区 域 类 型 ,分别 是 可 编辑 区 域 . 重 复 区 域 . 可 选区 域 和 
可 编辑 标签 属性 。 


1. 定义 可 编辑 区 域 


可 编辑 区 域 是 基于 模板 的 文档 中 的 未 锁定 区 域 ; 它 是 模板 中 可 以 编辑 的 部 分 。 模 板 
的 创作 者 可 以 将 模板 的 任何 区 域 指定 为 可 编辑 的 。 要 让 模板 生效 , 它 应 该 至 少 包含 一 个 
可 编辑 区 域 , 否 则 ,基于 该 模板 的 页 面 将 无 法 编辑 。 

在 默认 情况 下 ,新 创建 的 模板 的 所 有 区 域 都 处 于 锁定 状态 。 因 此 ,要 使 用 模板 ,必须 
将 模板 中 的 某 些 区 域 设置 为 可 编辑 区 域 。 定 义 可 编辑 区 域 的 操作 步骤 如 下 : 

(1) 将 鼠标 光标 放 到 要 插入 可 编辑 区 域 的 位 置 。 

(2) 执行 “插入 ”模板 对 象 "一 “可 编辑 区 域 " 命 令 ,或 单 击 * 常 用 " 插 人 工具 栏 中 的 
“可 编辑 区 域 " 按 钮 图 ,打开 “新 建 可 编辑 区 域 ? 对 话 框 ,如 图 8-3 所 示 。 

(3) 在 “名 称 ”文本 框 中 输入 可 编辑 区 域 的 名 称 。 

(4) 单 击 “ 确 定 ” 按 钮 , 即 可 在 光标 位 置 插入 可 编辑 区 域 . 如 图 8-4 所 示 。 


新 建 可 编辑 区 域 


名 和 你: RR] 


ni 


图 8-3 “新 建 可 编辑 区 域 " 对 话 杠 图 8-4 插入 可 编辑 区 域 


插入 可 编辑 区 后 ,将 会 在 状态 栏 上 出 现 一 个 KEENDIaESEditable 标 签 项 ,在 状态 栏 上 
单 击 此 标签 后 ,会 选中 可 编辑 区 域 ; 按 Delete 键 可 以 删除 可 编辑 区 域 。 

说 明 : 在 Dreamweaver 8. 0 中 对 模板 进行 可 编辑 区 域内 容 定义 时 , 既 可 以 标记 整个 
表格 ,也 可 以 标记 表格 中 的 菜 个 单元 格 作 为 可 编辑 区 域 ,但 是 不 能 一 次 标记 多 个 单元 格 。 
层 被 标记 为 可 编辑 区 域 后 仍然 可 以 随意 改变 其 位 置 ,并 且 可 以 任意 修改 层 的 内 容 。 


2. 定义 可 选区 域 


可 选区 域 是 在 创建 模板 时 定义 的 。 在 使 用 模板 创建 网 页 时 ,对 于 可 选区 域 的 内 容 ( 如 
文本 、 图 片 等 ), 可 以 选择 显示 或 者 不 显示 。 使 用 可 选区 域 可 以 控制 不 一 定 在 基于 模板 的 
文档 中 显示 的 内 容 。 有 两 种 可 选区 域 对 象 。 

(1) 可 选区 域 : 可 以 显示 和 隐藏 特别 标记 的 区 域 ,在 这 些 区 域 中 无 法 编辑 内 容 。 可 
选区 域 的 模板 选项 卡 在 单词 让 之 后 。 根 据 模板 中 设置 的 条 件 ,可 以 定义 该 区 域 在 其 所 创 
建 的 页 面 中 是 否 可 见 。 

(2) 可 编辑 的 可 选区 域 : 可 以 设置 是 否 显示 或 隐藏 该 区 域 , 并 可 以 编辑 该 区 域 中 的 
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内 容 。 比 如 ,如 果 可 选区 域 中 包括 图 像 或 文本 , 即 可 设置 该 内 容 是 否 显示 ,并 根据 需要 对 
该 内 容 进行 编辑 。 可 编辑 区 域 是 由 条 件 语句 控制 的 。 

定义 可 选区 域 的 具体 操作 步骤 如 下 : 

(1) 将 鼠标 光标 放 到 要 定义 可 选区 域 的 位 置 。 

(2) 执行 “插入 ”模板 对 象 "一 可 选区 域 " 命 令 ,或 单 击 “ 常 用 ”插入 工具 栏 中 的 “可 
选区 域 按 钮 间 , 打 开 “ 新 建 可 选区 域 ” 对 话 框 ,如 图 8-5 所 示 。 


图 8-5 “新 建 可 选区 域 " 对 话 框 
(3) 在 “名 称 ” 文 本 框 中 输入 可 选区 域 的 名 称 ;选中 “上 默认 显示 ” 复 选 框 ,表示 可 以 设置 
要 在 文档 中 显示 的 选 定 区 域 。 
(4) 单 击 “ 高 级 "选项 卡 ,对 话 框 内 容 如 图 8-6 所 示 。 单 击 “ 使 用 参数 " 单 选 按 钮 右 侧 
的 下 拉 按 钮 ,打开 下 拉 列 表 框 ,可 选择 与 选 定 内 容 链 接 的 现 有 参数 ;选择 “输入 表达 式 " 单 
选 按钮 , 则 可 输入 表达 式 内 容 。 


新 建 可 选区 域 


和 3 玉 参 烧 克 失 入 一 个 表达 式 ， 以 确定 该 区 域 是 否 可 


加 使 用 参数 : < 无 > 国 
口 | 输入 表达 式 : 


pptionalRegionl 及 


| 


例 现 :LANCUAGEE= English 


图 8-6 “高 级 "选项 卡 内 容 
(5) 单 击 “ 确 定 ” 按 钮 , 即 可 在 模板 文档 上 插入 可 选区 域 。 
3. 定义 重复 区 域 


重复 区 域 是 可 以 根据 需要 在 基于 模板 的 页 面 上 复制 任意 次 数 的 模板 部 分 。 重 复 区域 
通常 用 于 表格 ,但 是 也 可 以 为 其 他 页 面 元 素 定 义 重复 区 域 。 重复 区 域 可 以 使 用 两 种 重复 
区 域 对象 : 重复 区 域 和 重复 表格 。 用 户 可 以 使 用 重复 区 域 在 模板 中 复制 任意 次 数 的 指定 
区 域 。 重 复 区 域 是 可 编辑 区 域 ,要 使 重复 区 域 中 的 内 容 可 编辑 ,必须 在 重复 区 域内 搬入 可 
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编辑 区 域 。 

定义 重复 区 域 的 具体 操作 步骤 如 下 : 

(1) 将 鼠标 光标 定位 到 要 定义 重复 区 域 的 位 置 。 

(2) 执行 “插入 ”~ 模板 对 象 ">~* 重 复 区 域 ?命令 ,或 单 击 * 常 用 ? 插 和 人 工具 栏 中 的 ” 习 
复 区 域 ” 按 钮 图 ,打开 “新 建 重 复 区 域 ” 对 话 框 ,如 图 8-7 所 示 。 

(3) 在 “名 称 ” 文 本 框 中 输入 重复 区 域 的 提示 信息 。 

(4) 单 击 “ 确 定 ” 按 钮 , 即 可 插入 重复 区 域 。 

模板 中 除了 可 以 定义 一 般 内 容 为 重复 区 域 以 外 ,还 有 一 种 特殊 模板 对 象 可 以 定义 为 
可 重复 , 那 就 是 重复 表格 。 可 以 使 用 重复 表格 创建 包含 重复 行 的 表格 格式 的 可 编辑 区 域 ， 
也 可 以 定义 表格 属性 并 设置 表格 单元 格 可 编辑 。 

定义 重复 表格 的 具体 操作 步骤 如 下 : 

(1) 在 模板 文档 中 将 插入 点 放 在 文档 中 想 要 插入 重复 表格 的 位 置 。 

(2) 执行 “插入 ”一 “模板 对 象 ”“ 重 复 表格 ”命令 ,弹出 “插入 重复 表格 ”对 话 框 ,如 
图 8-8 所 示 。 其 中 各 选项 含义 如 下 所 述 。 


县 


新 建 重 复 区 域 


| , 
交 和 和 i 


图 8-7 “新 建 重复 区 域 ? 对 话 杠 图 8-8 “插入 重复 表格 "对话 框 


@. 行 数 : 用 于 确定 表格 具有 的 行 的 数目 。 

@ 列 数 : 用 于 确定 表格 具有 的 列 的 数目 。 

@@ 单元 格 边 距 : 用 于 确定 单元 格 内 容 和 单元 格 边 框 之 间 间 隔 的 像素 数 。 
@ 单元 格 间距 : 用 于 确定 相 邻 的 表格 单元 格 之 间 间 隔 的 像素 数 。 

@ 宽度 : 以 像素 为 单位 或 按 占 浏览 器 窗口 宽度 的 百分比 指定 表格 的 宽度 。 
@ 边框 : 用 于 指定 表格 边框 的 宽度 ,以 像素 为 单位 。 

@ 〇 重复 表格 行 : 用 于 指定 表格 中 哪些 行 包括 在 重复 区 域 中 。 

@ 起 始 行 : 用 于 将 输入 的 行 号 设置 为 包括 在 重复 区 域 中 的 第 一 行 。 

@ 结束 行 : 用 于 将 输入 的 行 号 设置 为 包括 在 重复 区 域 中 的 最 后 一 行 。 
四 区 域名 称 : 用 于 为 重复 区 域 设 置 唯一 的 名 称 。 

(3) 根据 需要 进行 相应 设置 后 , 单 击 “确定 ”按钮 , 即 可 插入 重复 表格 。 


4. 定义 可 编辑 标签 属性 


可 编辑 标签 属性 可 以 解除 模板 中 某 些 页 面 元 素 的 某 个 或 某 些 属性 的 锁定 ,以 便 该 属 
性 可 以 在 基于 模板 的 页 面 中 编辑 ,允许 用 户 在 基于 模板 的 页 面 中 修改 指定 标签 属性 , 例 
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如 ,模板 文档 中 设置 背景 颜色 为 可 编辑 标签 属性 ,用户 即 可 在 基于 模板 的 页 面 中 设置 不 同 
的 背景 颜色 ,并 且 只 能 更 新 指定 为 可 编辑 的 属性 ,在 页 面 中 可 以 设置 多 个 可 编辑 属性 ,这 
样 用 户 就 可 以 在 基于 模板 的 文档 中 修改 这 些 属性 ,从 而 设计 出 风格 大 体 一 致 但 又 有 适当 
变化 的 一 组 网 页 来 。 可 编辑 标签 属性 提供 了 四 种 类 型 : 文本 ,布尔 值 . 颜 色 和 URL。 

定义 可 编辑 标签 属性 的 具体 操作 步骤 如 下 : 

(1) 选 定 要 设置 可 编辑 标签 属性 的 对 象 。 

(2) 执行 “修改 "~“ 模 板 ”-~" 令 属性 可 编辑 ”命令 ,打开 * 可 编辑 标签 属性 ”对话 框 , 如 
图 8-9 所 示 。 

(3) 在 “属性 ”下 列 列表 框 中 选择 可 编辑 的 属性 , 若 没 有 需要 的 属性 , 则 单 击 “ 添 加 ” 按 
钮 ,打开 Dreamweaver 对 话 框 ,如 图 8-10 所 示 。 在 文本 框 中 输入 要 添加 的 属性 名 称 , 单 击 
“确定 ”按钮 。 


可 编辑 标签 属性 
尖 TD 标签 的 哪些 属性 应 是 可 编 


: 国 
| 令 属 性 可 编辑 


类 型 ; 
Me 
Ne 


图 8-9 “可 编辑 标签 属性 ”对 话 框 图 8-10 ”Dreamweaver 对 话 框 


(4) 选中 “ 令 属性 可 编辑 ” 复 选 框 , 则 处 于 其 下 方 的 选项 可 用 。 在 “标签 "文本 框 中 输 
入 标签 名 称 ; 单 击 “ 类 型 " 右 侧 的 下 拉 按 钮 ,在 弹出 的 下 拉 列 表 框 中 选择 该 属性 允许 具有 的 
值 的 类 型 ;在 “默认 ”文本 框 中 输入 所 选 标 签 属性 的 值 。 

(5) 单 击 “ 确 定 ” 按 钮 。 


8.1.3 ” 赃 套 模板 


嵌 套 模板 是 指 其 设计 和 可 编辑 区 域 都 基于 另 一 个 模板 的 模板 。 和 骸 套 模板 对 于 控制 共 
享 许多 设计 元 素 的 站 点 页 面 中 的 内 容 很 有 用 ,但 在 各 页 之 间 有 些 差 异 , 例 如 ,基本 模板 中 
可 能 包含 更 宽广 的 设计 区 域 ,并 且 可 以 由 站 点 的 许多 内 容 提 供 者 使 用 ,而 秀 套 模板 可 以 进 
一 步 定 义 站 点 内 特定 部 分 的 页 面 中 的 可 编辑 区 域 。 在 Dreamweaver 8. 0 中 允许 创建 说 套 
模板 (可 以 多 重 柑 套 ) ,给 网 站 开发 和 站 点 维护 .更 新 带 来 了 很 大 的 方便 。 要 创建 谍 套 模 
板 ,首先 要 保存 基础 模板 ,然后 用 基础 模板 创建 新 的 文档 ,再 把 该 文档 保存 为 模板 。 在 新 
的 模板 中 ,可 以 对 基础 模板 中 定义 的 可 编辑 区 做 进一步 的 定义 ,如 果 在 基本 模板 中 创建 了 
一 个 可 编辑 区 域 , 然 后 再 创建 一 个 嵌 套 模板 ,只 要 没有 在 艇 套 模板 的 该 区 域 中 插入 任何 新 
的 模板 区 域 , 该 可 编辑 区 域 将 会 出 现在 基于 艇 套 模 板 的 文档 中 。 在 基于 散 套 模板 的 文档 
中 ,可 以 添加 或 更 改 从 基本 模板 传递 的 可 编辑 区 域 ,以 及 在 新 模板 中 创建 的 可 编辑 区 域 中 
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的 内 容 。 

在 Dreamweaver 8. 0 中 创建 符 套 模板 的 具体 方法 是 首先 要 创建 一 个 基于 模板 的 文 
档 , 然 后 在 该 文档 中 的 可 编辑 区 域内 单 击 ,在 “常用 ”插入 工具 栏 中 单 击 “ 创 建 嵌 套 模板 ” 按 
钮 加 ,在 弹出 的 “另存 为 模板 ”对 话 框 中 为 模板 输入 名 称 , 单 击 “ 确 定 ” 按 钮 即 可 。 

在 嵌 套 模板 中 ,传递 的 可 编辑 区 域 具 有 绿色 边框 。 在 可 编辑 区 域内 可 以 插入 模板 标 
记 , 这 样 它 就 不 会 作为 可 编辑 区 域 在 基于 该 嵌 套 模板 的 文档 中 传递 。 这 种 区 域 具 有 橙色 
的 边框 ,而 不 是 蓝 色 的 边框 。 


8.1.4 应 用 模板 


创建 了 模板 , 接 下 来 就 是 基于 模板 创建 新 的 文档 了 。 以 模板 为 基础 创建 新 的 文档 有 
两 种 方法 ; 一 种 是 从 模板 创建 文件 , 另 一 种 是 在 现 有 的 文档 中 应 用 模板 。 


1. 从 模板 创建 文件 


创建 模板 之 后 ,就 可 以 将 模板 作为 新 文档 的 基础 ,创建 带 有 模板 的 新 网 页 。 具 体操 作 
步骤 如 下 : 

(1) 执行 文件” 一“ 新建 ?命令 ,打开 “从 模板 新 建 ?对 话 框 。 选 择 该 对 话 框 中 的 “ 模 
板 ” 选 项 卡 , 从 中 选择 要 应 用 的 模板 ,如 图 8-11 所 示 。 


从 模板 新 建 


HTL 1.0 Transiticna 


当 横 板 芍 变 时 更 新 页 面 (]) 


图 8-11 “从 模板 新 建 ” 对 话 框 


(2) 单 击 “ 创 建 "按钮 , 即 可 创建 一 个 应 用 该 模板 的 页 面 。 在 模板 中 的 相应 部 分 输入 
内 容 后 ,保存 为 网 页 即 可 。 


2. 在 现 有 的 文档 中 应 用 模板 
基于 模板 创建 新 文档 还 有 一 种 方法 就 是 在 现 有 的 文档 中 应 用 已 存在 的 模板 。 其 具体 
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操作 步骤 如 下 : 

(1) 打开 将 要 应 用 模板 的 文档 。 

(2) 执行 “修改 ”一 “模板 ”~“ 套 用 模板 到 页 ”命令 ,打开 * 选 择 模板 "对话 框 ,如 图 8-12 
所 示 。 

(3) 在 该 对 话 框 中 选择 一 个 模板 , 单 击 “ 选 定 ” 按 钮 。 此 时 如 果 文 档 中 存在 不 能 自动 
指定 到 模板 区 域 的 内 容 , 将 弹出 “不 一 致 的 区 域名 称 ” 对 话 框 。 如 果 有 未 解析 的 内 容 , 可 以 
为 该 内 容 选择 一 个 目标 ,如 图 8-13 所 示 。 单 击 “ 确 定 ” 按 钮 后 , 原 有 文档 即 可 套用 在 模 


板 中 。 


不 一 致 的 区 域名 称 
此 文档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 


日 辣 项 
|—Docunent body EditRegion3 
Docunent head (未 解析 > 


Pe | 
value= 可 选 内 容 || </mm: treenode> 
</mm:treenode> </mm:treenode> 
《/mm: treenode》 value= 重 复 的 内 容 | | 

</mm:treenode> </mm:treenode> 


划 veb 国 远 定 《</mm: treenode> 《/mm:treenode》 value= 可 编辑 区 


: [index ] 域 || /mm:treenode> </mm:treenode> 
ET </mm:treenode> </mm:treenode> 
将 内 容 移 到 新 区 域 : EditRegion3 图 [于 所 有 内 
助 确定 
Gee ee 
a el lo S 
h 


当 模 板 改变 时 更 新 页 面 (0) 


图 8-12 “选择 模板 "对话 框 图 8-13 “不 一 致 的 区 域名 称 ” 对 话 框 


3. 页 面 与 模板 分 离 

基于 模板 创建 的 文档 ,要 想 更 改 页 面 中 的 其 他 不 可 更 改 的 区 域 ,有 一 种 方法 可 以 实 
现 , 那 就 是 将 页 面 从 模板 中 分 离 出 来 。 当 页 面 被 分 离 后 , 它 将 成 为 一 个 普通 文档 ,不 再 存 
在 与 模板 的 任何 关联 ,用 户 就 可 以 任意 修改 可 编辑 区 域 和 锁定 区 域 的 内 容 了 。 具 体操 作 
步骤 如 下 : 


(1) 打开 要 分 离 的 文档 。 
(2) 执行 “修改 ”>“ 模 板 ”->“ 从 模板 中 分 离 ” 命 令 , 这 时 文档 中 的 锁定 区 域 会 自动 转 


变 为 可 编辑 区 域 。 
8.1.5 ”修改 模板 并 更 新 站 点 


因为 模板 和 应 用 了 模板 的 文档 之 间 保 持 着 链接 的 关系 ,所 以 在 修改 模板 并 将 它 保存 
的 时 候 , Dreamweaver 8. 0 会 提示 是 否 更 新 所 有 应 用 了 该 模板 的 页 面 。 这 就 是 
Dreamweaver 8.0 网 站 批量 更 新 功能 。 
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当 已 经 利用 模板 创建 了 多 个 网 页 时 ,又 想 更 改 模板 中 的 某 些 网 页 元 素 , 可 以 直接 在 模 
板 中 更 改 , 保 存 后 将 会 弹出 “更 新 模板 文件 ”对 话 框 ,如 图 8-14 所 示 。 单 击 “ 更 新 ”按钮 , 打 
开 如 图 8-15 所 示 的 “更 新 页 面 ” 对 话 框 完成 自动 更 新 。 在 保存 模板 的 同时 也 更 新 了 基于 
模板 建立 的 所 有 网 页 。 


更 新 模板 文件 


要 基于 此 模板 更 新 所 有 文件 外? 
00. htal 
01.htal 
02. htal 


图 8-14 “更 新 模板 文件 "对话 框 


图 8-15 “更 新 页 面 " 对 话 框 


8.2 库 


应 用 模板 是 为 了 避免 重复 创建 网 页 的 整体 框架 ,而 应 用 库 项 目 则 是 为 了 避免 重复 输 
和 具有 相同 格式 和 内 容 的 文档 元 素 组 合 。 所 谓 库 项 目 ,实际 上 是 文档 内 容 的 任意 组 合 , 可 
以 将 文档 中 的 任意 内 容 存 储 为 库 项 目 , 使 它 在 其 他 地 方 被 重复 使 用 。 

应 用 库 可 以 控制 局 部 效果 。 如 制作 网 页 时 经 常 需要 将 邮箱 地 址 .电话 或 版 权 等 信息 
放 到 不 同 的 网 页 上 ,这 时 如 果 一 一 进行 输入 就 太 麻烦 了 ,可 以 将 其 收集 到 库 中 ,使 之 成 为 
库 项 目 。 使 用 时 只 需 插 入 库 项 目 就 可 以 了 。 

Dreamweaver 8. 0 将 库 项 目 存放 在 本 地 站 点 的 Library 文件 夹 中 ,并 允许 为 每 个 站 点 
定义 不 同 的 库 。 利 用 库 面 板 及 其 快捷 菜单 .可 以 完成 创建 .删除 .修改 库 项 目 , 给 库 项 目 换 
名 ,把 库 项 目 添加 到 页 面 , 用 库 项 目 更 新 站 点 或 页 面 等 任务 。 
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8.2.1 创建 库 项 目 


在 Dreamweaver 8. 0 中 ,文本 、 表 格 、 表 单 . 图 像 、 插 件 等 
任意 元 素 都 可 以 作为 库 项 目 。 当 创建 了 一 个 库 项 目 后 ， 
Dreamweaver 会 在 当前 站 点 文件 夹 下 创建 一 个 库 文件 夹 ,以 
后 生成 的 库 项 目 都 将 放 在 该 文件 夹 内 ,所 以 创建 库 项 目 之 前 
必须 先 正确 地 建立 站 点 。 

创建 库 项 目 有 两 种 方法 ,第 一 种 是 在 打开 的 网 页 中 选中 
要 生成 库 项 目的 网 页 元 素 ,执行 “修改 ”一 “ 库 ” 一 “增加 对 象 到 
库 ” 命 令 ; 另 一 种 是 执行 “窗口 >“ 资源 ”命令 ,打开 “资源 ” 面 
板 , 单 击 “ 库 ”按钮 融 , 打 开设 置 库 属性 的 界面 ,如 图 8-16 所 
示 , 单 击 镁 按钮, 在“ 名称” 下 输入 库 项 目的 名 称 , 按 Enter 键 ， 
即 可 在 * 库 ?面板 新 建 库 项 目 。 然 后 单 击 艾 按钮 即 可 对 新 建 的 
库 项 目 进行 编辑 。 


8.2.2 编辑 库 项 目 


创建 了 库 项 目 后 ,用 户 还 可 以 对 库 项 目 进行 重 命名 .更 新 .删除 等 操作 。 
1. 重 命名 库 项 目 


要 更 改 库 项 目的 名 称 ,具体 操作 步 又 如 下 : 

(1) 选 定 “ 库 ”面板 上 要 重 命名 的 库 项 目 。 

(2) 执行 下 列 操作 之 一 : 

名 单 击 鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 * 重 命名 "选项 。 

@ 单 击 “ 库 ”面板 右上 角 的 下 拉 按 钮 法 ,从 中 选择 “ 重 命名 ”选项 。 
@ 单 击 库 项 目 名 称 选项 ,使 之 变 为 可 编辑 状态 。 

(3) 输入 新 名 称 。 


2. 库 项 目的 更 新 


Dreamweaver 8. 0 允许 对 库 项 目 进行 修改 ,但 修改 后 原来 使 用 该 项 目的 网 页 就 会 失 
去 与 该 项 目的 联系 ,需要 及 时 更 新 。 更 新 库 项 目的 操作 步 又 如 下 : 

(1) 执行 “修改 ”>“ 库 ”>“ 更 新 页 面 "命令 ,打开 “更 新 页 面 " 对 话 框 ,如 图 8-17 所 示 。 

(2) 在 对 话 框 中 , 单 击 “ 查 看 ” 右 端 下 拉 按 钮 ,打开 下 列 列表 框 ,从 中 选择 需要 的 选项 ; 
选 定 “ 库 项 目 ” 复 选 框 ,可 以 更 新 站 点 中 的 所 有 库 项 目 ; 选 定 “ 模 板 " 复 选 框 ,可 更 新 站 点 中 
的 所 有 模板 。 

(3) 单 击 “开始 ?按钮 即 可 更 新 。 
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1KB /Library/1. 1bi 


Emegdses 和 lo 


[ 插入 _] CT 


图 8-16 创建 库 项 目 


3. 删除 库 项 目 


图 8-17 “更 新 页 面 " 对 话 框 


要 删除 库 项 目 , 具 体操 作 步 又 如 下 ， 
(1) 选 定 “ 库 ”面板 上 要 删除 的 库 项 目 。 
(2) 单 击 “ 库 ”面板 右 下 角 的 “删除 ”按钮 窗 或 者 按键 盘 上 的 Delete 键 。 

说 明 : 删除 库 项 目的 操作 只 是 将 库 项 目 从 库 中 删除 掉 , 并 不 会 改变 文档 的 内 容 。 


8.2.3 应 用 库 项 目 


1, 应 用 库 项 目 


创建 好 库 项 目 后 ,就 可 以 将 其 添加 到 网 页 上 了 ,操作 步骤 如 下 : 
(1) 在 * 库 ?面板 中 选 定 要 添加 的 库 项 目 。 
(2) 单 击 面板 左下 角 的 “插入 ?按钮 所 于 和 K  ], 即 可 将 库 项 目 应 用 到 网 页 上 。 


2. 脱离 库 项 目 


有 时 为 便于 对 库 元 素 进行 编辑 ,可 以 将 文档 中 应 用 的 库 元 素 脱离 库 的 控制 ,操作 步骤 


如 下 : 


(1) 选中 文档 中 应 用 的 库 元素 , 这 时 会 显示 其 属性 面板 ,如 图 8-18 所 示 。 


-J 。 库 可 目 


Src /Library/1.1bi 打开 ]】 从 源 文件 中 分 离 


重新 创建 


图 8-18 ” 库 元 素 “ 属 性 ”面板 


(2) 单 击 “ 从 源 文件 中 分 离 ” 按 钮 , 即 可 将 库 元 素 与 库 脱离 , 且 可 以 在 文档 中 对 库 元 素 


进行 修改 。 
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一 、 填空 题 

1. 模板 文件 的 后 级 名 为 

2. 模板 区 域 类 型 分 别 是 可 编辑 区 域 、 \ 可 选区 域 和 

3. 库 是 一 种 特殊 的 Dreamweaver 文件 , 库 项 目 可 以 在 网 页 上 重复 使 用 , 库 文件 的 扩 
展 名 为 

二 、 选 择 题 


1. 下 面 关 于 库 的 说 法 中 ,不 正确 的 是 

A. 库 实际 上 是 一 段 HTML 代码 

B. 库 文件 被 放置 在 Templates 文件 夹 内 

C. 库 项 目的 文件 扩展 名 为 . lbi 

D. 库 是 存储 网 站 中 经 常 出 现 或 重复 使 用 的 页 面 元 素 
2. 当 编辑 模板 自身 时 ,以 下 说 法 正确 的 是 

A. 只 能 修改 可 编辑 区 域 中 的 内 容 

B. 只 能 修改 锁定 区 域 的 内 容 

C. 可 编辑 区 域 中 的 内 容 和 锁定 区 域 的 内 容 都 可 以 修改 

D. 可 编辑 区 域 中 的 内 容 和 锁定 区 域 的 内 容 都 不 能 修改 


三 、 操作 题 


1. 创建 一 个 名 称 为 new 的 空白 模板 ,并 设计 模板 。 
2. 在 new 模板 的 基础 上 肉 套 一 个 模板 ,并 将 该 蔡 套 模板 应 用 到 文档 中 。 
3. 将 自己 的 E-mail 地 址 定义 为 库 项 目 , 并 应 用 到 文档 中 。 
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使 用 CSS 样式 表 


CSS 是 Cascading Style Sheet 的 缩写 ,可 译作 “ 层 释 样式 表 ”, 它 是 一 系列 格式 的 规 
则 。 在 制作 网 页 过 程 中 ,使 用 CSS 样式 表 可 以 定义 页 面 的 文字 、 列 表 项 目 符号 ,精确 控制 
页 面 布局 和 整体 外 观 。 另 外 ,还 可 以 控制 网 页 中 级 别 元 素 的 格式 和 定位 ,如 页 边 距 边框 、 
浮动 文本 的 设置 。Dreamweaver 8. 0 中 增添 了 CSS 面板 ,可 以 通过 该 面板 以 可 视 化 方式 
来 使 用 CSS 样式 ,本 章 将 详细 介绍 在 Dreamweaver 8. 0 中 如 何 进 行 CSS 样式 表 的 创建 和 
使 用 。 


本 章 学 习 要 点 : 
。 创建 CSS 样式 


。 设置 CSS 样式 属性 
。 应 用 CSS 样式 


9.1 创建 CSS 样式 


在 Dreamweaver 中 , 当 用 户 通过 “属性 ”面板 定义 页 面 中 元 素 时 也 就 定义 了 一 个 元 素 
的 CSS 样式 ,但 这 却 不 能 有 效 地 提供 工作 效率 。 要 想 减 少 设计 者 的 工作 量 , 仍 需要 使 用 
“CSS 样式 ”面板 来 定义 完整 简洁 的 CSS 样式 表 。 

创建 CSS 样式 的 步 又 如 下 : 

(1) 执行 “窗口 ">“CSS 样式 ”命令 ,或 在 “属性 ”面板 中 
单 击 CSS 按钮 CJ, 打 开 如 图 9-1 所 示 的 “CSS 样式 ”面板 。 

(2) 在 “CSS 样式 ”面板 中 单 击 “ 新 建 CSS 规则 ”按钮 央 ， 
打开 “新 建 CSS 规则 ”对 话 框 ,如 图 9-2 所 示 。 

(3) 在 “选择 器 类 型 "中 选择 要 创建 的 样式 表 类 型 ,其 中 : 

@ 类 (可 应 用 于 任何 标签 ): 表示 将 样式 应 用 在 全 部 的 
HTML 标记 中 。 

@ 标签 (重新 定义 特定 标签 的 外 观 ) : 表示 将 样式 应 用 在 


图 9-1 “CSS 样式 ”面板 


新 建 CSS 规则 


选择 器 类 型 : @) 类 (可 应 用 于 任何 标签 ) (C) 
口 标签 (重新 定义 特定 标签 的 外 观 ) (T) 
口 高 级 (ID、 伪 类 选择 器 等 ) (如 ) 


名 称 : 


定义 在 : @) | (新 建 样式 表 文 件 ) 
加 公 对 该 文档 


图 9-2 “新 建 CSS 规则 ?对 话 框 


特定 的 标记 中 。 当 选择 此 项 后 ,在 "标签 "的 下 拉 列 表 中 会 出 现 一 系列 HTML 标记 名 称 ， 
选择 需要 定义 的 标记 即 可 ,如 图 9-3 所 示 。 


新 建 CSS 规则 


选择 器 类 型 : CD) 美 (可 应 用 于 任何 标签) (C) 
回 标签 (重新 定义 特定 标签 的 外 现 ) (DD 
加 再 级 ( 匡 、 伪 类 移 择 器 等 ) 人) 


标签: 开罗 


a 
: |abbr 

起 在 jeronm 

address 

applet 

rea 

lb 


lbasefont 
lbao 
区 


ig ' 
bl Ce le 
[br 


图 9-3 选择 要 定义 的 标记 


@ 高 级 (ID、 伪 类 选择 器 等 ) : 如 果 要 创建 特定 编号 区 域 或 特定 文本 的 CSS 样式 ,可 
以 选择 此 项 。 此 时 ,在 “选择 器 ”下拉 列表 中 会 出 现 四 个 选项 ,如 图 9-4 所 示 ,可 分 别 对 链 
接 的 不 同 状态 进行 设置 。 


新 建 “SS 规则 


选择 器 类 型 : 〇 类 (可 应 用 于 任何 标签) C) 
〇 标签 (重新 定义 特定 标签 的 外 观 ) (T) 
回 高 级 (ID、 协 类 选择 器 等 ) (4) 


中 图 
aiink 


a:visited 
a:hover 
aiactiye 


图 9-4 高 级 选择 器 选项 


(4) 若 选 择 “ 类 选择 器 ”, 则 在 “名 称 ” 下 拉 列 表 框 中 输入 样式 的 名 称 。 注 意 ,名 称 必须 
以 点 号 “. "开头 ,英文 字母 为 首 字符 ,例如 : .sl。 
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(5) 在 “定义 在 ”选项 中 ,如 果 选 择 “ 新 建 样式 表 文 件 ”, 表 示 可 创建 一 个 包含 页 面 样式 
的 外 部 样式 表 文 件 。 若 选择 * 仅 对 该 文档 则 可 建立 一 个 内 徐 样 式 表 。 为 便于 日 后 的 修改 
维护 ,建议 选择 “新 建 样式 表 文件 ”。 

(6) 单 击 “ 确 定 ” 按 钮 ,打开 “保存 样式 表 文 件 为 ”对 话 框 。 

(7) 选择 保存 的 位 置 并 保存 样式 名 称 , 单 击 “ 保 存 ” 按 钮 ,打开 定义 CSS 样式 属性 对 话 
框 ,如 图 9-5 所 示 。 


.sl 的 CSS 规则 定义 (在 1. css 


| 春 要 09 “| 粗细 (DD: 
变 体 (DD): 
像素 (px) ”~ | 大 小 写 人 ED) : 


应 用 (&) 帮助 


图 9-5 定义 CSS 样式 属性 对 话 杠 


9.2 设置 CSS 样式 属性 


在 如 图 9-5 所 示 的 CSS 样式 属性 对 话 框 的 右 侧 列表 中 显示 了 CSS 样式 的 多 种 
属性 。 


1. 类 型 


使 用 "类 型 ”选项 卡 ,可 以 设置 样式 的 基本 属性 。 在 设置 文本 CSS 样式 时 ,类 型 属性 
是 所 有 CSS 样式 属性 的 基础 。 其 中 各 参数 的 含义 如 下 所 述 。 

(1) 字体 : 设置 当前 样式 所 有 的 字体 。 

(2) 大 小 : 通过 选择 或 输入 具体 的 数值 可 以 设置 字体 的 大 小 。 

(3) 样式 : 指定 字体 的 显示 样式 ,包括 正常 .斜体 和 偏 斜 体 ,默认 为 正常 。 

(4) 行 高 : 设置 文本 所 在 行 的 高 度 。 

(5) 粗细 : 对 字体 应 用 特定 或 相对 的 粗细 量 , 正 常 =400, 粗 体 ==700。 

(6) 变 体 : 设置 文本 的 变量 ,IE 浏览 器 支持 变 体 属性 .但 Navigator 浏览 器 不 支持 。 

(7) 大 小 写 : 将 选 定 内 容 中 的 首 字母 大 写 或 者 将 文本 设置 为 全 部 大 /小 写 。 

(8) 颜色 : 设置 文本 颜色 。 

(9) 修饰 : 设置 文本 的 修饰 格式 ,包括 下 划 线 、 上 划 线 ,删除 线 等 属性 。 
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2. 背景 


使 用 如 图 9-6 所 示 的 “背景 "选项 卡 ,可 以 设置 CSS 样式 的 背景 参数 ,对 网 页 中 的 元 素 
应 用 背景 属性 。 其 中 各 参数 的 含义 如 下 所 述 。 


-51 的 CSS 规则 定义 (在 1. css 中 ) 


上 


守 赎 汉 司 


半 语 潭 


FE 本 二 


信 素 (pz) ~ 
像素 (px) ~ 


(1) 背景 颜色 : 
(2) 背景 图 像 : 
(3) 


jm 


图 9-6 “背景 "选项 卡 


设置 元 素 的 背景 颜色 。 
设置 元 素 的 背景 图 像 。 


E 复 : 设置 背景 图 像 是 否 重复 显示 ,分 为 4 种 情况 : 不 重复 ,只 是 在 应 用 样式 的 


元 素 背景 上 显示 一 次 该 图 像 ;重复 : 在 应 用 样式 的 元 素 背 景 上 的 水 平方 向 和 垂直 方向 上 
重复 排列 图 像 : 横 向 重复 : 在 元 素 背景 上 的 水 平方 向 上 重复 显示 该 图 像 ; 纵 向 重复 : 在 元 
素 背 景 上 的 垂直 方向 上 重复 显示 该 图 像 。 


(4) 附件 : 确定 


(5) 水 平 位 置 : 
(6) 垂直 位 置 , 


3. 区 块 


背景 图 像 是 固定 在 原始 位 置 还 是 随 内容 一 起 滚动 。 
指定 背景 图 像 相对 于 应 用 样式 的 元 素 的 水 平 位 置 。 
指定 背景 图 像 相对 于 应 用 样式 的 元 素 的 垂直 位 置 。 


区 块 定 义 是 对 文本 段落 控制 的 扩充 ,主要 是 使 用 如 图 9-7 所 示 的 “区 块 选 项 卡 来 进 


行 设 置 。 其 中 各 参数 的 含义 如 下 所 述 。 


(1) 单词 间距 : 
(2) 字母 间距 : 
(3) 垂直 对 齐 : 
(4) 文本 对 齐 : 
(5) 文本 缩 进 : 


用 于 在 文字 之 间 添 加 空格 。 

设置 字符 之 间 的 间距 。 

设置 对 象 的 纵向 对 齐 方式 ,通常 是 相对 于 其 上 一 级 而 言 的 。 

设置 文本 的 对 齐 方 式 是 居 左 、 居 右 还 是 居中 。 

设置 首 行 的 缩 进 距离 。 指 定 为 负 值 时 相对 于 创建 了 文本 突出 ,但 是 


其 显示 取决 于 浏览 器 。 
(6) 空格 : 设置 处 理 元 素 中 空白 部 分 的 方式 。 可 在 下 拉 列 表 框 中 选择 正常 .保留 不 


换行 几 个 选项 ,其 意 


义 分 别 为 按照 正常 方法 处 理 空格 ,使 多 重 空白 合并 成 一 个 ;保留 应 用 
样式 元 素 中 空格 的 原始 形象 ,不 允许 多 重 的 空白 合并 成 一 个 ;长 文本 不 自动 换行 。 
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-sl 的 CSS 规则 定义 (在 1. css 中 ) 


天 
i 单词 间 耻 (8) : ET 
属 | 字 扣 风量 (L) : 国字 体言 (an) 
国 委 直 和 (D) : 国 % 
文本 对齐 (DD : | 
文字 内 进 (D) : EE) 
格外: 男 
星 示 (0): 国 


取消 应 用 他 一 ] 


图 9-7 “区 块 ? 选 项 卡 
(7) 显示 : 选择 一 些 可 显示 的 对 象 。 
4. 方 框 


使 用 如 图 9-8 所 示 的 “ 方 框 ” 选 项 卡 , 可 以 控制 元 素 在 页 面 上 的 放置 方式 以 及 属性 定 
义 。 其 中 各 参数 的 含义 如 下 所 述 。 


-sl 的 CSS 规则 定义 (在 1. css 


:[” 轩 [这 wo ~| 抑 WD:[ 辆 

:[” 国 | 代 Gx) ~ 清除 @):[ 辆 | 

回 全 部 相同 (3) 回 全 部 相同 G) 

:[ 国人 于 GD “| 上 O):[ 国信 素 Ga ~| 

| ~] 便 素 (pz) ~ 右 (@:| ~| 僚 环 oxz) “| 
| 像素 (oa | 儿 下 加 : | 像素 (px) | 

;| ~j 哥 素 cpz) “~ 丰 四 :| | 像素 (pz) “| 


图 9-8 “ 方 框 ?选项 卡 


(1) 宽 : 设置 元 素 的 宽度 。 

(2) 高 : 设置 元 素 的 高 度 。 

(3) 浮动 : 设置 元 素 的 浮动 方式 (如 文本 、 层 、 表 格 等 )。 其 他 元 素 按 通常 的 方式 环绕 
在 浮动 元 素 的 周围 。 

(4) 清除 : 不 允许 元 素 浮动 。 选 项 左 对 齐 表示 不 允许 左边 有 浮动 对 象 ; 右 对 齐 表示 
不 允许 右边 有 浮动 对 象 ;两 者 表示 允许 两 边 都 可 以 有 浮动 对 象 ;无 表示 不 允许 有 浮动 
对 象 。 

(5) 填充 : 指定 元 素 内 容 与 元 素 边框 (如 果 没 有 边框 , 则 为 边 距 ) 之 间 的 间距 。 选 中 
“全 部 相同 ”可 以 将 相同 的 填充 属性 应 用 于 元 素 的 “上 ”“ 右 ” “下” 和“ 左 ” 侧 。 
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(6) 边界 : 指定 一 个 元 素 的 边框 (如 果 没 有 边框 , 则 为 填充 ) 与 另 一 个 元 素 之 间 的 间 
距 。 取 消 选择 “全 部 相同 ?可 设置 元 素 各 个 边 的 边 距 。 选 中 * 全 部 相同 ?可 以 将 相同 边界 属 
性 应 用 于 元 素 的 “上 ”“ 右 ”“ 下 ”和 “ 左 ” 侧 。 

5. 边框 

使 用 如 图 9-9 所 示 的 “边框 ”选项 卡 ,可 以 定义 元 素 周围 的 边框 ,例如 : 样式 、 宽 度 和 
颜色 。 其 中 各 参数 的 含义 如 下 所 述 。 


-sl 的 CSS 规则 定义 (在 1. css 中 ) 


样式 

加 全 部 相同 (S$) ” 局] 全 部 相同 人) 
上 GD:| 国 国信 来 (pn 
右 (B): | > 傍 素 <px) 


TF®: ~ 侯 素 人 px) 


左 (CD): be 


| 像素 (px) 


图 9-9 “边框 ?选项 卡 


(1) 样式 : 设置 边框 的 样式 外 观 。 取 消 选 择 “ 全 部 相同 ” 复 选 框 ,可 以 分 别 设置 每 个 


边 的 样式 。 

(2) 宽度 : 设置 元 素 边框 的 粗细 。 取 消 选择 “全 部 相同 " 复 选 框 ,可 以 分 别 设置 每 个 
边 的 宽度 。 

(3) 颜色 : 设置 边框 的 颜色 。 取 消 选 择 “ 全 部 相同 ” 复 选 框 ,可 以 分 别 设置 每 个 边 的 
颜色 。 

6. 列表 

使 用 如 图 9-10 所 示 的 “列表 ”选项 卡 , 可 以 为 列表 标记 定义 列表 设置 。 其 中 各 参数 的 
含义 如 下 所 述 。 


(1) 类 型 : 设置 项 目 符号 或 者 编号 的 外 观 。 

(2) 项 目 符号 图 像 : 可 以 指定 自 定义 图 像 作为 项 目 符号 。 单 击 “ 浏 览 ” 按 钮 [ 验 ..j] 选 
择 图 像 或 直接 键入 图 像 路 径 。 

(3) 位 置 : 设置 列表 项 文本 是 否 换行 和 缩 进 。 其 中 “内 ”选项 表示 当 列 表 过 长 而 自动 
换行 而 不 缩 进 ;* 外 ”选项 表示 列表 过 长 而 自动 换行 是 以 缩 进 方式 显示 。 


7. 定位 


定位 主要 针对 层 元 素 , 也 可 以 将 页 面 中 已 有 的 对 象 转变 为 层 元 素 的 内 容 ,其 设置 面板 
为 如 图 9-11 所 示 的 “定位 ”选项 卡 。 其 中 各 参数 的 含义 如 下 所 述 。 
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-sl 的 CSS 规则 定义 《在 1. css 中 ) 


请 类 型 中: 国 

加 项 目 符号 攻 像 @): 珈 [LE 
ps 位 置 全 ): 国 

扩展 


确定 取消 应 用 (&) 帮助 


图 9-10 “列表 ”选项 卡 


.sl 的 CSS 规则 定义 (在 1.css 中 ) 


国 
[这 标 (px) |] 


染 素 pz) ~| 省 加 


这 村 Cpx》 ~] : 济 素 Cpx) ~ 
全 于 ~] | 寿 @): EX 
Er : 便衣 CR) ~ 


ES 党 素 (px) ~ 


确定 取消 应 用 (&) 帮助 


图 9-11 “定位 ?选项 卡 


(1) 类 型 : 在 下 列 列表 框 中 设置 浏览 器 中 层 的 定位 方式 。 包 括 使 用 绝对 坐标 、 使 用 
相对 坐标 、 放 置 在 文本 层 上 。 

(2) 显示 : 设置 层 的 初始 显示 状态 。 在 下 拉 列 表 框 中 ,可 包括 继承 、 可 见 、 隐 藏 3 个 选 
项 ,其 意义 分 别 为 : 继承 分 层 父 级 元 素 的 可 视 性 属性 ;显示 层 的 内 容 且 不 考虑 上 一 级 的 元 
素 ; 隐 藏 层 的 内 容 且 不 考虑 上 一 级 的 元 素 。 

(3) Z 轴 : 设置 定义 层 重合 的 顺序 。 

(4) 溢 位 : 确定 在 层 的 内 容 超 出 它 的 大 小 时 将 发 生 的 情况 ,这 些 属性 控制 如 何 处 理 
此 扩展 。 

(5) 置 入 : 设置 层 的 位 置 和 大 小 。 

(6) 裁 切 : 定义 层 的 可 见 部 分 的 位 置 和 大 小 。 


8. 扩展 
使 用 如 图 9-12 所 示 的 “扩展 ”选项 卡 ,可 以 设置 CSS 样式 的 打印 、 滤 镜 及 鼠标 指针 格 


第 9 章 使 用 C55 样式 表 (83) 


(8% 


式 。 其 中 各 参数 的 含义 如 下 所 述 。 


(1) 分 页 : 指 打印 网 页 中 的 内 容 时 ,在 指定 的 位 置 上 强行 换 页 。 它 包括 两 个 选项 , 即 


-sl 的 CSS 规则 定义 (在 1- css 中 ) 


[Tm | ES 


抽 用 (4&) 才 助 


图 9-12 “扩展 ?选项 卡 


“之 前 ”和 “之 后 ”, 表 示人 允许 用 户 在 某 元 素 之 前 或 之 后 进行 分 页 。 


(2) 光标 : 设置 鼠标 指针 经 过 应 用 了 该 样式 的 对 象 时 鼠标 指针 的 外 观 图 像 。“ 光 标 ” 


的 名 称 和 参数 的 具体 功能 如 表 9-1 所 示 。 


表 9-1 “光标 "的 类 型 名 称 和 功能 
名 称 功 能 效果 名 称 功 能 效果 
crosshair 十 字 准 心 十 n-resize 向 上 改变 大 小 1 
text 文字 /编辑 下 nw-resize 向 上 左 改变 大 小 3 
wait 等 待 /沙漏 及 w-resize 向 左 改 变 大 小 4 
default 系统 默认 R sw-resize 向 下 左 改变 大 小 5 
help 帮助 N? s-resize 向 下 改变 大 小 1 
e-resize 向 右 改变 大 小 + se-resize 向 下 右 改 变 大 小 ~ 
ne-resize 向 上 右 改变 大 小 auto 自动 RR 
(3) 滤 镜 : 对 样式 所 控制 的 对 象 应 用 特殊 效果 。“ 滤 镜 ” 的 名 称 和 参数 的 具体 功能 如 
表 9-2 所 示 。 
表 9-2 “ 滤 镜 "名称 和 功能 及 其 参数 
名 称 功 能 参 数 
Alpha 设置 透明 层次 Opacity 表示 透明 度 ,FinishOpacity 表示 目标 值 
BlendTrans | 设置 图 片 淡 进 淡 出 Duration 表示 过 渡 时 间 
a 创建 模糊 效果 eh Oe 表示 角度 ,Strength 表示 
Chroma 制作 专用 颜色 透明 Color 表示 颜色 
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续 表 


名 称 功 能 参数 
DropShadow| 创建 对 象 的 固定 影子 ee ee 
FlipH 创建 水 平 镜像 图 片 无 
FlipV 创建 垂直 镜像 图 片 无 
Glow 设置 图 像 发 光 Color 表示 发 光 颜色 ,Strength 表示 强度 
Gray 把 图 片 灰 度 化 无 
Invert 反 色 无 
Light 创建 光源 在 图 像 上 无 
Mask 创建 透明 掩 模 在 对 象 上 Color 表示 颜色 
RevealTrans | 设置 图 片 交 蔡 的 过 渡 效 果 Duration 表示 过 渡 时 间 ,Transition 表示 过 渡 类 型 
Shadow 创建 偏 移 固定 影子 Color 表示 阴影 颜色 ,Direction 表示 角度 
Wm 波纹 效果 wa a ni 
Xray 使 对 象 变 得 像 被 X 光照 射 一 样 | 无 


9.3 应 用 CSS 样式 


当 创建 好 CSS 样式 后 ,标签 CSS 样式 和 伪 类 CSS 样式 会 自动 应 用 到 相应 的 HTML 
标签 和 伪 类 上 ,但 类 CSS 样式 则 需要 手动 将 其 应 用 到 网 页 元 素 上 。 


1. 使 用 快捷 菜单 应 用 CSS 样式 


具体 操作 方法 为 : 选中 要 应 用 样式 的 网 页 元 素 后 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 
的 “CSS 样式 ?选项 中 选择 要 应 用 的 样式 即 可 。 


2. 使 用 “CSS 样式 ”面板 应 用 CSS 样式 


具体 操作 方法 为 : 选中 要 应 用 样式 的 网 页 元 素 后 ,在 “CSS 样式 ”面板 的 CSS 样式 名 
称 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “套用 ”命令 即 可 。 


3. 使 用 “属性 ”面板 应 用 CSS 样式 


具体 操作 方法 为 : 选中 要 应 用 样式 的 网 页 元 素 后 ,在 “属性 ”面板 的 “样式 ”下 拉 列 表 
框 中 选择 需要 的 CSS 样式 即 可 。 


4. 链接 外 部 CSS 样式 
链接 到 一 个 外 部 CSS 样式 表 的 具体 操作 方法 为 : 选中 要 应 用 样式 的 网 页 元 素 后 ,在 
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“CSS 样式 ”面板 中 , 单 击 附 加 样式 表 按钮 一 ,弹出 如 图 9-13 所 示 的 对 话 框 。 在 该 对 话 框 
的 “文件 /URL” 下 拉 列 表 中 选择 要 链接 的 外 部 CSS 样式 表 文 件 ,或 单 击 “浏览 ”按钮 ,在 打 
开 的 “选择 样式 表 文件 ”对 话 框 中 选择 所 需 的 外 部 CSS 样式 表 文件 。 选 中 “添加 为 : "项 中 
的 “链接 ” 单 选 按钮 时 ,表明 要 链接 外 部 的 CSS 样式 表 , 选 中 “导入 ” 单 选 按钮 时 , 则 将 外 部 
CSS 样式 表 导 入 到 当前 文档 中 。 


链接 外 部 样式 表 


文件 /0RL(E) :| 国 | [ 浏 几 ... ] 确定 
添加 为 : @) 链接 (L) 预览 
〇 导入 GD) 取消 
%#kl 加 rs 
您 也 可 以 输入 逗号 分 隔 的 媒体 类 型 列表 。 
Dreanveaver 的 范 便 拌 式 老 可 以 帮助 您 起 步 。 帮助 


图 9-13 “链接 外 部 样式 表 ” 对 话 框 


说 明 : 将 两 个 或 多 个 CSS 样式 应 用 于 同一 网 页 元 素 时 ,这 些 样 式 可 能 会 发 生 冲 突 , 浏 
览 器 将 按 以 下 规则 显示 : 

(1) 如 果 应 用 于 同一 网 页 元 素 的 两 个 样式 发 生 冲 突 , 则 浏览 器 显示 最 里 面 的 规则 , 即 
离 元 素 本 身 最 近 的 规则 。 

(2) 如 果 外 部 样式 和 内 部 样式 同时 影响 元 素 时 , 则 应 用 内 部 样式 表 。 

(3) 如 果 有 直接 冲突 , 则 自 定义 CSS 规则 中 的 属性 将 覆盖 HTML 标签 样式 中 的 
属性 。 


9.4 编辑 CSS 样式 


9.4.1 修改 CSS 样式 表 


若 要 修改 CSS 样式 表 , 可 以 执行 以 下 操作 

(1) 在 “CSS 样式 ”面板 中 ,选择 “全 部 ”模式 [3 匡 友 , 打 开 “ 所 有 规则 ”窗口 。 

(2) 执行 下 列 操作 之 一 : 

@ 双击 要 编辑 的 样式 表 名 称 。 

@ 单 击 要 编辑 的 样式 表 名 称 , 再 单 击 “CSS 样式 ”面板 底部 的 “编辑 样式 ”按钮 六 。 
@ 选中 要 编辑 的 样式 表 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “编辑 ”选项 。 
(3) 在 弹出 的 “CSS 规则 定义 ”对 话 框 中 ,根据 需要 修改 样式 表 。 


9.4.2 删除 CSS 样式 


如 要 删除 CSS 样式 表 , 可 以 执行 以 下 操作 
(1) 在 “CSS 样式 ”面板 中 ,选择 “全 部 ”模式 [53]E 丰 |, 打开 “所 有 规则 ”窗口 。 
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(2) 执行 下 列 操作 之 一 : 

@ 单 击 要 删除 的 样式 表 名 称 , 再 单 击 “CSS 样式 ”面板 底部 的 “删除 CSS 样式 ” 按 
钮 军 . 

@ 选中 要 删除 的 样式 表 , 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “删除 ”选项 。 


9.5 综合 实例 


本 节 通 过 具体 的 实例 进一步 强化 CSS 的 应 用 技能 ,熟悉 在 Dreamweaver 8.0 中 定义 
和 应 用 CSS 的 方法 。 
【实例 9-1】 制作 一 个 样式 并 将 样式 应 用 于 文档 中 ,效果 如 图 9-14 所 示 。 


全 应 用 CSS 样 式 - 了 icrosoft Internet Explorer 
文件 @) 编辑 时 ) 查看 W) 收藏 和 ) 工具 G) 帮助 0 


@ 扣 -日 : 国 固 的 Pe 容 mx @| 全 -全国 
纺 址 虽 | 个: Wayveb\Exemplel htal 国 加 Wal tH ” 
Bai 祝 5 让 “| 加 月 最 图 


狗 自 钙 听 
太 竺 洪 下 最 后 一片 荡 仔 
得 或 的 八 万 


粹 移 反 折 靡 
是 不 焉 辕 和 的 获 刁 


此 到 放歌 解 企 称 鞭 到 
鲜 活 丽 双 冷 观 
我 习 怪 二 用 二 近 文 学 


| 
成 为 写 诗 的 背 佑 
未 湾 拒 日 两 光学 的 生活 


图 9-14 应 用 CSS 样式 的 效果 


(1) 新 建 一 网 页 ,并 输入 如 图 9-15 所 示 的 文字 ,本 例 将 在 此 基础 上 创建 CSS 样式 ,并 
将 样式 应 用 到 该 文档 中 。 

(2) 执行 “窗口 ”>“CSS 样式 ”命令 ,打开 “CSS 样式 ”面板 , 单 击 面板 底部 的 妇 按 钮 ， 
弹出 “新 建 CSS 规则 ”对 话 框 ,在 “选择 器 类 型 "中 选择 “类 ” 单 选 按钮 ,在 “名 称 ”文本 框 中 
输入 . cl, 如 图 9-16 所 示 。 

(3) 单 击 “ 确 定 ” 按 钮 ,弹出 定义 CSS 样式 的 对 话 框 。 在 “分 类 ”列表 框 中 选 定 “ 类 型 ” 
选项 ,在 “字体 ”下 拉 列 表 框 中 选择 “华文 彩云 "选项 (车 没有 改 字 体 , 则 选择 “编辑 字体 列 
表 ”, 然 后 添加 该 字体 ) ,在 “大 小 ”下 拉 列 表 框 中 选择 “36”, 在 “修饰 ”中 选择 “闪烁 ” 复 选 框 ， 
在 “颜色 ”后 面 的 文本 框 中 输入 颜色 值 *#FF9966”, 如 图 9-17 所 示 。 
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图 9-15 原始 文档 


新 建 C55 规则 


选择 器 类 型 : @) 类 呵 应 用 于 任何 标签 ) C) 
〇 标签 重新 定义 特定 标签 的 外 观 ) CD) 
加 高 级 ( ID、 伪 类 选择 器 等 ) (A) 


傅 建 样式 表 文 件 ) 


图 9-16 “新 建 CSS 规则 ”对 话 框 


-cl 的 C55 规则 定义 


全 素 @xo_ 国 


变 体 中: 
| 总 雪 px] ~ | 大 小 写 四 ): 
颜色 C): | 


图 9-17 设置 文字 样式 
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(4) 在 “分 类 "列表 框 中 选择 “背景 "选项 , 单 击 “ 背 景 图像 右 端的 “浏览 "按钮 ,从 弹出 
的 “选择 图 像 源 文件 "对话 框 中 选择 一 幅 背 景 图 像 , 如 图 9-18 所 示 。 


-cl 的 CSS 规则 定义 


[确定 ][ 取消 ][L 用 WwW ] (帮助 ] 


图 9-18 设置 背景 图 像 


(5) 在 “分 类 ”列表 框 中 选择 “区 块 " 选 项 ,在 “文本 对 齐 ”" 下 拉 列 表 框 中 选择 “居中 ” 选 
项 ,如 图 9-19 所 示 。 


-cl 的 C55 规则 定义 


图 9-19 设置 文本 对 齐 方式 


(6) 单 击 “ 确 定 ” 按 钮 ,完成 第 一 个 样式 cl 的 设置 。 

(7) 用 相同 的 方法 设置 样式 2, 名 称 为 . c2, 设 置 的 对 话 框 属性 如 图 9-20、 图 9-21 和 
图 9-22 所 示 。 

(8) 选 定 原始 文档 中 的 第 一 行 ,执行 “文本 ”一 “CSS 样式 ”一 cl 命令 , 即 可 为 选 定 的 文 
本 应 用 样式 ,如 图 9-23 所 示 。 

(9) 选 定 正文 部 分 的 文本 ,执行 “文本 ”>“CSS 样式 ”>c2 命令 , 即 可 为 选 定 的 文本 应 
用 样式 ,如 图 9-24 所 示 。 

(10) 保存 网 页 , 按 F12 键 预览 。 
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-c2 的 C55 规则 定义 


| 久未 Gx) 国 | 租 细 加 : 


图 9-20 文字 样式 


-c2 的 C55 规则 定义 


汪 | 
Sing/bj2. jpe 


图 
: 国 |[ 雷 过 (x) ~ 
国体 素 Gx) v 


图 9-21 背景 图 像 


-c2 的 C55 规则 定义 


[人 高 cm) >] 
字体 高 (m) | 


入 "| 


ER 


图 9-22 ”对 齐 方式 
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署 惠 | 


和 
> 


拓 泽 混 注 
部 半 沪 当 训 
Ee 


图 9-23 应 用 样式 cl 效果 图 9-24 应 用 样式 c2 效果 


【实例 9-2】 制作 图 像 翻转 效果 。 本 实例 主要 是 运用 了 CSS 滤 镜 属性 中 的 FlipH 属 
性 , 即 为 图 像 添 加 水 平 翻转 效果 。 效 果 如 图 9-25 所 示 。 


Microsoft Internet Explorer 
文件 @) 编辑 E) 查看 收 豪 ) 工具 GD) 帮助 0 


@ 右 -日 国 四 的 Pe 次 wx 加 | 卫 -全 


地 丰 加 | 全 wyvebvExwpltz hl 国 加 #5 ”> 
- 该 入 起 要 搜 于 的 内 容 图 | 忆 扩 坟 "| 名 国 知 >” 


图 9-25 图 像 翻 转 效 果 


(1) 新 建 一 网 页 。 执 行 “ 插 入 ”表格 ?命令 ,插入 一 个 1 行 2 列 , 宽 为 400 像素 , 边 
框 粗细 为 1 的 表格 ,并 将 其 设置 为 “居中 对 齐 ”。 

(2) 分 别 在 两 个 单元 格 中 插入 相同 的 图 像 , 如 图 9-26 所 示 。 

(3) 执行 “窗口 ?一 “CSS 样式 ”命令 ,打开 “CSS 样式 ”面板 , 单 击 面板 底部 的 凤 按 钮 ， 
弹出 “新 建 CSS 规则 ”对 话 框 ,在 “选择 器 类 型 "中 选择 “类 ” 单 选 按 钮 ,在 “名 称 ” 文 本 框 中 
输入 . s1, 如 图 9-27 所 示 。 
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其 Untitled-1 (XHTML)* 


EC NO A vx ik/ i 


图 9-26 插入 图 像 
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选择 器 类 型 ; @) 类 呵 应 用 于 任何 标签 ) CC) 
口 标签 一 新 定义 特定 标签 的 外 观 ) CD) 
〇 高 级 ( ID、 伪 类 选择 器 等 )() 


名 称 : 


定义 在 O | (新 建 样式 表 文 件 ) 
回 芭 对 该 文档 


图 9-27 “新 建 CSS 规则 ”对 话 框 


(4) 单 击 “ 确 定 ” 按 钮 ,弹出 定义 CSS 样式 的 对 话 框 。 在 “分 类 ”列表 框 中 选择 “扩展 ” 
选项 ,在 “ 滤 镜 "下拉 列 表 框 中 选择 “FlipH” 选 项 ,如 图 9-28 所 示 。 


-sl 的 C55 规则 定义 


RevealTrans Dur ation=?, Transition=?) 

Shaaow (Col or=?, Direction=?) | 
Wave (Add=?, Freq=?, LightStrength=?, Phas: 

ray 


图 9-28 设置 滤 镜 
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(5) 单 击 "确定 ?按钮 ,完成 样式 sl 的 定义 。 
(6) 选中 左 侧 单元 格 中 的 图 像 , 单 击 鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 “CSS 样 
式 ” 一 s1, 如 图 9-29 所 示 。 


编辑 标签 E) 《ine> 
册 除 标签 W) 《<ine> 
创 哇 链接 LL) 


调整 大 小 区 ) mi | 


一 | 在 firerorks 中 优化 O. 上 
ee 


添加 到 图 像 收 送 @) 
站 点 上 


前 切 吕 ) 
持 贝 中) 


设计 备注 @) 
属性 号 ) 


图 9-29 应 用 样式 sl 


(7) 保存 网 页 , 按 F12 键 预览 。 
【实例 9-3】 制作 超 链 接 样 式 并 将 其 应 用 于 文档 中 ,其 效果 如 图 9-30 所 示 。 


名 链接 样式 - Wicrosoft Internet Explorer 
文件 下) 编辑 区 ) 查看 W) 收藏 W) 工具) 帮助 0 


@ 克 -日 : 国 国 约 Ps 兴 ex 加 | 全 -和 多 国 -也 


— Cpe Hedl htnl 国 回 | 


(1) 新 建 一 网 页 。 


图 9-30 链接 样式 


执行 “插入 ”一 “表格 "命令 ,插入 一 个 1 行 4 列 、 宽 为 600 像素 、 边 


框 粗细 为 1 的 表格 ,并 将 其 设置 为 “居中 对 齐 ”。 
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四 


(2) 分 别 在 单元 格 中 输入 文字 ,居中 对 齐 ,并 为 文字 设置 空 链接 ,如 图 9-31 所 示 。 


后 E: vaywebVExasle3-htal (XHTHL) 
DD RTP 二 和 和 PPP PN 


图 9-31 添加 文字 链接 


(3) 执行 “窗口 ”CSS 样式 "命令 ,打开 “CSS 样式 ”面板 , 单 击 面板 底部 的 妈 按 钮 ， 
弹出 “新 建 CSS 规则 ”对 话 框 ,在 “选择 器 类 型 "中 选择 “高 级 " 单 选 按钮 ,在 “选择 器 ”下 拉 
列表 框 中 选择 “a: link”, 如 图 9-32 所 示 。 
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图 9-32 选择 “a: link” 选 择 器 


(4) 单 击 “ 确 定 ” 按 钮 ,弹出 定义 CSS 样式 的 对 话 框 。 在 “分 类 ”列表 框 中 选 定 “ 类 型 ” 
选项 ,在 “大 小 ”下 拉 列 表 框 中 选择 “12”, 在“ 颜色” 后面 的 文本 框 中 输入 颜色 值 
“#FF66CC”; 在 “背景 ”选项 卡 中 的 “背景 颜色 ”文本 框 中 输入 颜色 值 *#CCCCCC”, 如 
图 9-33 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 “a: link” 样 式 的 设置 。 
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图 9-33 设置 "a: link” 样 式 
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E 复 步 又 (3) ,在 “选择 器 ”下拉 列表 框 中 选择 “a: hover”, 如 图 9-34 所 示 。 


jm 


(5) 
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图 9-34 ”选择 "a: hover” 选 择 器 


(6) 单 击 “ 确 定 ” 按 钮 ,弹出 定义 CSS 样式 的 对 话 框 。 在 “分 类 "列表 框 中 选 定 “ 类 型 ” 
选项 ,在 “大 小 "下拉 列表 框 中 选择 “18”, 在 “粗细 ”下 拉 列 表 框 中 选择 “ 粗 体 ”, 在 “修饰 ”中 
选择 下划线 " 复 选 框 ,在 “颜色 ”后 面 的 文本 框 中 输入 颜色 值 * #0000FF”, 如 图 9-35 所 示 。 
单 击 “ 确 定 ” 按 钮 ,完成 “a: link” 样 式 的 设置 。 


azhover 的 C55 规则 定义 
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图 9-35 设置 “a: hover” 样 式 


(7) 返回 网 页 文档 中 的 文字 链接 ,已 改变 为 “a: link” 样 式 , 如 图 9-36 所 示 。 


后 E: vayweb\Examle3.htal (XETHL) 


图 9-36 应用“a: link” 样 式 
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(8) 保存 网 页 , 按 F12 键 预览 。 


一 、 选 择 题 
1. 下 列 关于 CSS 样式 的 说 法 不 正确 的 是 
A. 使 用 CSS 样式 可 以 指定 自 定 义 列表 项 目 符号 并 指定 不 同 的 字体 大 小 和 单位 
B. 使 用 CSS 样式 可 以 像素 为 单位 设置 字体 大 小 
C. CSS 样式 使 用 户 不 可 以 控制 使 用 HTML 无 法 控制 的 属性 
D. 更 新 CSS 样式 时 ,使 用 该 样式 的 所 有 文档 和 格式 都 自动 更 新 为 新 样式 


2. 使 用 CSS 样式 规则 中 的 可 以 定义 标记 和 属性 的 间距 以 及 设置 对 齐 方式 。 
A. 类 型 B. 边框 C. 方 框 D. 区 块 

二 、 操作 题 

1. 创建 一 个 CSS 样式 ,要 求 如 下 : 

(1) 名 称 为 . yl; 


(2) 字体 为 仿宋 体 , 大 小 为 5, 颜色 为 黄色 ; 

(3) 背景 颜色 为 #99CC99; 

(4) 为 文字 添加 下 划 线 。 

2. 通过 设置 Shadow 和 DropShadow 滤 镜 属性 ,制作 文字 投影 效果 ,显示 效果 如 
图 9-37 所 示 。 


图 9-37 阴影 字 效 果 
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创建 网 页 特效 


在 制作 网 页 时 ,为 了 丰富 网 页 内 容 , 使 网 页 新 颖 有 风格 ,可 以 为 网 页 添加 特殊 效果 。 
制作 网 页 特效 主要 是 应 用 Dreamweaver 8.0 中 自 带 的 行为 以 及 在 网 页 中 添加 JavaScript 
代码 来 完成 的 。 

行为 丰富 了 网 页 的 交互 功能 , 它 允许 访问 者 通过 与 页 面 的 交互 来 改变 网 页 内 容 , 或 者 让 
网 页 执行 某 个 动作 ,Dreamweaver 8.0 自 带 的 行为 种 类 多 样 .功能 强大 ,而 且 这 些 行为 都 是 开 
放 的 。 而 JavaScript 语言 在 实际 设计 网 页 的 过 程 中 也 是 非常 有 用 的 ,运用 它 可 以 设计 出 一 些 
丰富 多 彩 的 网 页 。 本 章 将 详细 介绍 如 何 利用 行为 和 JavaScript 代码 来 创建 网 页 特效 。 


本 章 学 习 要 点 : 


。 行为 的 作用 
。 利用 行为 创建 网 页 特效 
。 利用 脚本 代码 创建 网 页 特效 


10.1 行为 概述 


行为 是 指 在 网 页 中 进行 的 一 系列 动作 ,通过 这 些 动作 ,可 以 实现 用 户 同 网 页 的 交互 ， 
也 可 以 通过 动作 使 某 个 任务 被 执行 。 例 如 ,用 户 在 浏览 网 页 时 单 击 按钮 ,然后 弹出 一 个 提 
示 对 话 框 ,这 就 是 一 个 完整 的 行为 。 

Dreamweaver 8. 0 提供 了 丰富 的 行为 ,设置 这 些 行 为 可 以 为 网 页 对 象 添 加 一 些 动 态 
效果 和 简单 的 交互 功能 。 一 个 行为 是 由 一 个 事件 Event 和 一 个 动作 Action 构成 ,通常 ， 
动作 是 一 段 预先 写 好 的 JavaScript 代码 ,利用 这 些 代码 可 以 完成 相应 的 任务 ;事件 则 由 浏 
览 器 定义 , 它 可 以 被 附加 到 各 种 页 面 元 素 上 ,也 可 以 被 附加 到 HTML 标记 中 ,并 且 一 个 
事件 总 是 针对 页 面 元 素 或 标记 而 言 的 。 常 见 的 事件 类 型 及 含义 如 表 10-1 所 示 。 任 何 一 
个 动作 都 需要 一 个 事件 激活 ,两 者 相辅相成 。 例 如 , 当 某 个 浏览 者 将 鼠标 移动 到 某 一 图 像 
或 文字 上 ,浏览 器 就 可 能 生成 一 个 onMouseOver( 鼠 标 滑 过 ) 事 件 , 如 果 用 户 实现 设置 了 
某 个 动作 ,此 事件 将 激发 相应 的 动作 发 生 ,如 弹出 一 个 提示 框 或 在 状态 栏 中 显示 相关 
信息 。 


表 10-1 常见 事件 类 型 及 其 含义 


名 称 含 区 
onLoad 当 载 入 网 页 时 触发 
onUnload 当 用 户 离开 页 面 时 触发 
onMouseOver 当 鼠 标 移 人 指定 元 素 范 围 时 触发 
onMouseDown 当 用 户 按 下 鼠标 左 键 但 没有 释放 时 触发 
onMouseMove 当 用 户 在 页 面 上 拖 动 鼠标 时 触发 
onMouseOut 当 鼠 标 移 出 指定 元 素 范 围 时 触发 
onMouseUp 当 用 户 释 放 鼠 标 后 触发 
onKeyUp 当 用 户 释 放 了 被 按 下 的 键 后 触发 
onKeyDown 当 用 户 任意 按 下 一 键 时 ,在 没有 释放 之 前 触发 


当 用 户 任 意 按 下 一 键 , 然 后 释放 该 键 时 触发 ,该 事件 是 


所 onKeyDown 和 onKeyUp 事件 的 组 合 事件 
onClick 当 用 户 单 击 了 指定 的 页 面 元 素 时 触发 
onDblClick 当 用 户 双击 了 指定 的 页 面 元 素 时 触发 
onFocus 当 指 定 的 元 素 变 成 用 户 交 互 的 焦点 时 触发 
onError 当 浏 览 器 载 和 页面 或 图 像 发 生 错误 时 触发 
onBlur 当 指 定 元 素 不 再 作为 交互 的 焦点 时 触发 
onChange 当 用 户 改 变 页 面 的 一 个 值 时 触发 


10.1.1 行为 面板 


Dreamweaver 8. 0 提供 了 一 个 专门 管理 和 编辑 行为 的 工具 , 即 “行为 ”面板 。 行 为 的 
添加 和 控制 主要 通过 “行为 ”面板 来 实现 。 如 果 要 打开 “行为 ”面板 ,可 以 执行 “窗口 >“ 行 
为 "命令 ,打开 如 图 10-1 所 示 的 “行为 ”面板 。 

“行为 ”面板 中 各 按钮 的 名 称 及 功能 描述 如 表 10-2 所 示 。 

表 10-2 “行为 "面板 各 按钮 名 称 及 功能 描述 
名 称 功 能 
显示 设置 事件 | 显示 添加 到 当前 文档 的 事件 
国 显示 所 有 事件 | 显示 所 有 可 用 的 事件 
[+ 添加 行为 从 快捷 菜单 中 添加 行为 
到 删除 事件 删除 选中 的 行为 
全 增加 事件 值 将 选中 的 动作 项 前 移 
[二 | 降低 事件 值 | 将 选中 的 动作 项 后 移 ee 
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10.1.2 添加 行为 


行为 可 以 添加 到 链接 、 图 像 、 表 单 等 任何 网 页 对 象 乃至 整个 网 页 中 ,使 其 具有 交互 效 
果 。 添 加 行为 的 操作 步骤 如 下 : 

(1) 选择 要 添加 行为 的 对 象 ,并 打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 中 | + 按钮 ,从 弹出 的 快捷 菜单 中 选择 所 需 行为 。 

(3) 当选 择 了 相应 的 行为 后 会 打开 相应 的 对 话 框 ,设置 相应 参数 。 

(4) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 完成 行为 的 添加 ,在 “行为 ”面板 的 列表 中 将 显示 添 
加 的 行为 。 

(5) 检查 默认 事件 是 否 是 所 需 的 事件 ,如 果 不 是 所 需 事件 ,可 以 在 “事件 "下拉 列表 框 
中 重新 选择 所 需 事件 。 


10.1.3 修改 行为 


如 果 对 添加 的 行为 不 满意 可 对 其 进行 修改 。 其 操作 步骤 如 下 : 

(1) 在 网 页 文档 中 选择 已 添加 了 行为 的 对 象 ,这 时 在 “行为 ”面板 中 可 以 显示 所 有 已 
添加 的 行为 。 

(2) 选择 要 修改 的 行为 ,如 果 要 修改 该 行为 的 事件 ,在 “事件 "下列 列 表 框 中 重新 选择 
所 需 事件 ;如 果 要 修改 该 行为 的 动作 , 则 双击 该 动作 ,然后 在 弹出 的 对 话 框 中 根据 需要 进 
行 修改 ;如 果 要 修改 行为 的 顺序 , 则 选中 要 调整 顺序 的 行为 , 单 击 a 或 v 按钮 进行 上 移 
或 下 移 。 


10.1.4 删除 行为 


要 删除 行为 ,可 直接 选中 该 行为 ,然后 单 击 = 按钮 或 直接 按 Delete 键 即 可 。 


10.2 使 用 Dreamweaver 8.0 内 置 行为 制作 特效 


Dreamweaver 8.0 中 预定 义 了 20 多 种 行为 ,如 果 在 网 页 中 适当 的 添加 行为 ,可 以 起 
到 动态 效果 并 使 用 户 与 网 页 之 间 具 有 交互 性 。 让 网 页 设计 者 无 需 掌握 JavaScript 语言 ， 
就 可 以 制作 出 快捷 菜单 .互动 图 像 ,为 页 面 插入 背景 音乐 等 一 些 特殊 效果 。 


10.2.1 交换 图 像 


通过 改变 图 像 标签 的 SRC 属性 将 一 个 图 像 变换 为 另 一 个 图 像 ,使 用 该 行为 可 以 创建 
变换 的 按钮 和 其 他 图 像 效 果 , 其 效果 与 我 们 前 面 介绍 的 “鼠标 经 过 图 像 相 同 。 值 得 注意 
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的 是 : 变换 的 图 像 应 该 和 原 有 图 像 有 相同 的 尺寸 (高 度 和 宽度 相同 ) 。 

添加 “交换 图 像 ” 行 为 的 操作 步骤 如 下 : 

(1) 执行 “插入 ”一 “图 像 " 命 令 , 在 网 页 中 插入 一 个 图 像 。 

(2) 选中 图 像 ,在 打开 的 “行为 ”面板 中 , 单 击 |+, 按 钮 ,从 弹出 的 快捷 菜单 中 选择 “ 交 
换 图 像 ” 选 项 ,打开 “交换 图 像 ” 对 话 框 ,如 图 10-2 所 示 , 其 中 各 项 含义 如 下 所 述 。 


预先 载 入 图 像 
局 标 滑 开 时 恢复 图 像 


图 10-2 “交换 图 像 ” 对 话 框 


中 图 像 : 在 该 列表 中 ,选择 要 交换 图 像 的 图 像 名 称 。 

四 设 定 原始 档 为 : 单 击 “ 浏 览 ” 按 钮 ,在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 选择 新 图 
像 文 件 , 或 直接 在 文本 框 中 输入 新 图 像 的 路 径 和 文件 名 。 

人 回 预 先 载 入 图 像 复 选 框 : 它 表 示 在 载 人 页 时 将 新 图 像 载 和 人 到 浏览 器 的 缓存 中 ,以 防止 
当 图 像 出 现时 由 于 下 载 而 导致 的 延迟 。 

人 回忆 标清 开 时 诡 复 图 像 复 选 框 : 它 表示 鼠标 离开 新 图 像 后 ,图 像 将 恢复 为 原始 图 像 。 若 
不 选中 该 选项 , 则 每 次 都 要 手动 给 图 像 对 象 添加 “恢复 交换 图 像 ”行为 。 

(3) 设置 完成 后 , 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 完成 行为 的 添加 ,“ 行 为 ”面板 中 将 出 现 
“交换 图 像 ” 和 ”恢复 交换 图 像 " 两 个 动作 。 检 查 默认 事件 是 否 是 所 需 的 事件 ,如 果 不 是 所 
需 事件 ,可 重新 选择 所 需 事件 。 


10.2.2 弹出 信息 


当 用 户 执行 某 一 操作 时 显示 一 个 带 有 指定 信息 的 对 话 框 ,该 对 话 框 只 有 一 个 “确定 ” 
按钮 ,所 以 使 用 此 行为 可 以 提供 信息 ,而 不 能 为 用 户 提供 选择 。 

添加 “弹出 信息 ”行为 的 操作 步骤 如 下 : 

(1) 选择 所 需 添 加 行为 的 对 象 , 若 需 在 网 页 打开 或 关闭 时 弹出 信息 , 则 选中 所 body> 


标签 。 
(2) 在 打开 的 “行为 "面板 中 , 单 击 [ 世 按钮 ,从 弹出 的 快捷 菜单 中 选择 “弹出 信息 ? 选 
项 ,打开 “弹出 信息 ”对 话 框 ,如 图 10-3 所 示 。 

(3) 在 “消息 ”文本 框 中 输入 要 显示 的 信息 。 

(4) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,完成 行为 的 添加 。 
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图 10-3 “弹出 信息 ”对 话 框 


【实例 10-1】 创建 一 网 页 , 当 打 开 网 页 时 ,将 弹出 一 个 内 容 为 欢迎 光临 我 的 小 
屋 !111” 的 消息 对 话 框 。 显 示 效 果 如 图 10-4 所 示 。 


文件 FE) 编辑 (E) 查看 (DD) 收 豪 @) 工具 (T) 帮助 8) 


@ 磺 - 昌 - 国 国 给 | 这 闪 刁 类 全 | 从" 各 加- 


批示 友 ) 个 E:\nyvet\1.htal 


图 10-4 弹出 信息 


(1) 新 建 网 页 , 单 击 选中 文档 编辑 窗口 左下 角 的 二 body 二 标签 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “弹出 信息 ”选项 ,打开 
“弹出 信息 ”对 话 框 。 

(3) 在 “消息 ”文本 框 中 输入 “欢迎 光临 我 的 小 屋 !111”, 如 图 10-5 所 示 。 


.| 欢迎 兴 格 我 的 小 屋 t 人 | 


图 10-5 设置 弹出 信息 


(4) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ,完成 “弹出 信息 "行为 的 添加 。 
(5) 在 “行为 面板 中 检查 该 行为 所 对 应 的 触发 事件 是 不 是 onLoad 事件 , 若 不 是 , 则 
重新 选择 。 
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(6) 保存 网 页 后 , 按 F12 键 预 览 。 


10.2.3 ”打开 浏览 器 窗口 


在 一 个 新 的 窗口 中 打开 指定 的 文档 ,可 以 指定 新 窗口 的 属性 (包括 其 大 小 )、 特 性 (是 
和 否 可 以 调整 大 小 ,是否 具有 菜单 栏 等 ) 和 名 称 。 例 如 ,使 用 此 行为 可 以 在 访问 者 单 击 缩 略 
图 时 在 一 个 单独 的 窗口 中 打开 该 图 像 的 原始 图 像 。 

添加 “打开 浏览 器 窗口 "行为 的 操作 步骤 如 下 : 

(1) 选择 所 需 对 象 并 打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “打开 浏览 器 窗口 ” 选 
项 ,打开 “打开 浏览 器 窗口 ”对 话 框 ,如 图 10-6 所 示 , 其 中 各 项 含义 如 下 所 述 。 


打开 浏览 器 窗口 


图 10-6 “打开 浏览 器 窗口 ”对话 框 


@ 要 显示 的 URL: 单 击 “ 浏 览 ” 按 钮 ,选择 要 显示 的 文件 。 

@ 窗口 宽度 : 指定 窗口 的 宽度 (以 像素 为 单位 ) 。 

@ 窗口 高 度 : 指定 窗口 的 高 度 ( 以 像素 为 单位 ) 。 

@ 属性 : 选择 是 否 在 弹出 窗口 显示 导航 工具 栏 (包括 “后 退 ”“ 前 进 ”"“ 主 页 ”和 * 刷 
新 ”等 标准 按钮 的 工具 栏 ) 、 地 址 工具 栏 ,状态 栏 (位 于 浏览 器 窗口 底部 的 区 域 , 在 该 区 域 中 
显示 剩余 的 载 人 时 间 和 链接 地 址 等 信息 ) .菜单 条 (浏览 器 窗口 显示 菜单 的 区 域 ) 。 另 外 ， 
“需要 时 使 用 滚动 条 ” 复 选 框 指定 如 果 内 容 超 出 可 视 区 域 应 该 显示 滚动 条 ,如 果 不 设置 此 
选项 , 则 不 显示 滚动 条 .“ 调 整 大 小 手柄 ” 复 选 框 指定 用 户 应 该 能 够 调整 窗口 的 大 小 。 在 
制作 时 ,可 根据 需要 进行 设置 。 

@ 窗口 名 称 : 为 新 窗口 命名 。 

(3) 设置 完成 后 , 单 击 “确定 ?按钮 关闭 对 话 框 ,完成 行为 的 添加 。 

【实例 10-2】 创建 一 网 页 ,在 打开 网 页 的 同时 在 新 窗口 中 打开 广告 页 面 ,新 窗口 的 
大 小 为 600 X400。 

(1) 新 建 网 页 , 单 击 选中 文档 编辑 窗口 左下 角 的 二 body 二 标签 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “打开 浏览 器 窗口 ” 选 
项 ,打开 “打开 浏览 器 窗口 ”对 话 框 。 

(3) 在 对 话 框 中 , 单 击 “ 浏 览 ” 按 钮 .在 打开 的 对 话 框 中 选择 “广告 . jpg” 文 件 , 在 “窗口 
宽度 ”文本 框 中 输入 600, 在 “窗口 高 度 ” 文 本 框 中 输入 400, 在 “窗口 名 称 ” 中 输入 “广告 ”， 
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设置 后 的 对 话 框 如 图 10-7 所 示 。 


打开 浏览 器 窗口 


jing/ 广 告 ,ipg 


图 10-7 设置 好 的 对 话 框 


(4) 单 击 “确定 ?按钮 关闭 对 话 框 ,完成 行为 的 添加 。 

(5) 在 “行为 ”面板 中 检查 该 行为 所 对 应 的 触发 事件 是 不 是 onLoad 事件 , 若 不 是 , 则 
重新 选择 。 

(6) 保存 网 页 后 , 按 F12 键 浏览 网 页 ,效果 如 图 10-8 所 示 。 


图 10-8 打开 浏览 器 窗口 


10.2.4 控制 Shockwave 或 Flash 


有 时 需要 控制 Shockwave 或 Flash 影片 的 播放 .停止 .倒退 或 转 到 Macromedia 
Shockwave 或 Macromedia Flash SWF 文件 中 的 由 。 

添加 “控制 Shockwave 或 Flash” 行 为 的 操作 步骤 如 下 : 

(1) 执行 “插入 ”一 “媒体 ”一 Flash | Shockwave 命令 ,在 网 页 中 插入 Flash 或 
Shockwave 影片 。 

(2) 选中 已 插入 的 影片 ,在 “属性 ”面板 的 “名 称 ”文本 框 中 输入 影片 的 名 称 。 
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(3) 选中 要 添加 该 行为 的 对 象 , 单 击 * 行 为 ?面板 中 的 | 世 按 钮 ,从 弹出 的 快捷 菜单 中 


选择 “控制 Shockwave 或 Flash” 选 项 ,打开 “控制 Shockwave 或 Flash” 对 话 框 ,如 图 10-9 
所 示 , 其 中 各 项 含义 如 下 所 述 。 


控制 Shockwave 或 Flash 


图 10-9 “控制 Shockwave 或 Flash” 对 话 框 


@ 影片 : 在 下 拉 列 表 框 中 选择 要 控制 的 影片 的 名 称 。Dreamweaver 8.0 会 自动 列 出 
当前 文档 中 所 有 Shockwave 或 Flash 影片 的 名 称 。 

@ 操作 : 选择 对 影片 进行 何 种 操作 ,有 播放 、 停 止 \ 后 退 和 前 往 影 片 的 某 一 帧 。 

(4) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 

【实例 10-3】 创建 一 网 页 ,在 网 页 中 利用 按钮 来 控制 Flash 影片 的 播放 和 停止 。 显 
示 效 果 如 图 10-10 所 示 。 


文件 全 ) 蜗 辑 (ZE 查看 (2) 归 肆 (4) 工具 (TI) 机 助 (了 ) 
@in - 日 - 国 国 的 | 及 次 Wx 包 | 后 - 马 可- 沁 | 
ED OE: wweb\t. henl 国 加 $$ 到 Me 交 ” 


完毕 我 的 电镜 


图 10-10 控制 Flash 影片 


(1) 新 建 网 页 ,将 “插入 ?工具 栏 切换 为 “布局 ”选项 卡 , 单 击 “布局 ”按钮 证 局 ,将 文档 
窗口 切换 到 “布局 ”模式 下 。 在 布局 工具 栏 中 单 击 绘 制 单元 格 按钮 加 ,在 页 面 中 间 位 置 给 
制 一 个 单元 格 ,并 在 该 单元 格 的 下 方 中 间 位 置 再 分 别 绘制 2 个 单元 格 ,如 图 10-11 所 示 。 

(2) 将 鼠标 置 于 单元 格 @@ 中 ,执行 “插入 ”一 “媒体 ”一 Flash 命令 ,弹出 “选择 文件 ”对 
话 框 ,在 对 话 框 中 选择 所 需 的 Flash 影片 ,如 图 10-12 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 Flash 
影片 的 插入 ,如 图 10-13 所 示 。 
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司 = 

| 

| 

目 i 
© | 
i | 
| 
i | 
| _ 


所 有 文件 (+ 和) | 


hd |W 定 | 
file:///E| /nyveb/f1lash/hudiel. svf L 多 数 .，] 


10-12 “选择 文件 ”对话 框 


图 10-13 插入 Flash 影片 
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(3) 选中 插入 的 Flash, 在 “属性 ”面板 的 “名 称 ” 文 本 框 中 为 Flash 影片 定义 名 称 
hudie, 如 图 10-14 所 示 。 


/ Flash, dX 宽 E71 文件 File:///E|yayweby/flashy/hudiel.] 人 局 ”| 和 @ 沉香 类 (© | 无 同 
FE | 高 B73 [ 生 R& 大 小 ] 

回 特 环 委 寺 这 品质 [高 品质 对 齐 [时 值 国 区 EX | 

回 自动 播放 水 二 边 距 | 比例 [ 医 认 ( 主 部 呈 示 国 |。 背 半 总 色 Cax.. 出 


图 10-14 Flash* 属 性 ”面板 


(4) 将 鼠标 置 于 图 10-11 的 单元 格 @ 中 ,执行 “插入 ”一 “表单 >“ 按钮 ”命令 ,完成 播 
放 按 钮 的 插入 。 选 中 插入 的 按钮 ,在 “属性 ”面板 中 将 “按钮 名 称 ” 文 本 框 中 的 内 容 改 为 
“play”,“ 值 ”文本 框 中 的 内 容 改 为 “播放 ”,“ 动 作 ” 单 选 按钮 选 为 无”, 如 图 10-15 所 示 。 


图 10-15 按钮 “属性 ?面板 


(5) 将 鼠标 置 于 图 10-11 的 单元 格 @ 中 ,执行 “插入 ”一 “表单 ”>“ 按 钮 ”命令 ,完成 停 

止 按钮 的 插入 。 选 中 插入 的 按钮 ,在 “属性 ”面板 中 将 “按钮 名 称 ” 文 本 框 中 的 内 容 改 为 

“stop”,“ 值 ”文本 框 中 的 内 容 改 为 “停止 ",“ 动 作 ” 单 选 按 钮 选 为 “无 ”。 插 入 按钮 后 效果 如 
图 10-16 所 示 。 

人 


53 省 磺 同 


10-16 插入 按钮 


(6) 选中 播放 按钮 , 单 击 “ 行 为 ”面板 中 的 [+J 按 钮 ,从 弹出 的 快捷 菜单 中 选择 “控制 
Shockwave 或 Flash” 选 项 ,打开 “控制 Shockwave 或 Flash” 对 话 框 ,在 该 对 话 框 中 的 “ 影 
片 ” 下 拉 列 表 框 中 选择 hudie,“ 操 作 ” 选 项 中 选择 “播放 ”, 单 击 “ 确 定 ” 按 钮 。 在 “行为 ” 面 
板 中 检查 触发 事件 是 否 为 onClick 事件 。 

(7) 选中 “停止 "按钮 ,重复 步骤 (6) ,只 需 在 “操作 ?选项 中 选择 “停止 " 即 可 。 

(8) 保存 网 页 , 按 F12 键 预览 。 通 过 播放 按钮 和 停止 按钮 可 以 控制 该 Flash 影片 的 
播放 状态 。 
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10.2.5 改变 属性 


可 以 动态 地 改变 对 象 的 某 些 属性 。 例 如 ,可 以 改变 层 的 背景 颜色 ,或 是 改变 图 像 的 大 
小 等 。 一 般 来 说 ,这 个 行为 能 够 改变 的 属性 决定 于 附加 动作 的 对 象 和 浏览 器 的 类 型 。 可 
以 使 用 该 行为 修改 属性 的 对 象 有 层 、 图 像 .表单 以 及 表单 中 的 各 元 素 。 

添加 “改变 属性 ”行为 的 操作 步骤 如 下 : 

(1) 选择 需 添 加 该 行为 的 对 象 ,打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “改变 属性 ”选项 ,打开 
“改变 属性 ”对 话 框 ,如 图 10-17 所 示 , 其 中 各 项 含义 如 下 所 述 。 


[LAYER 的 


避 *+++ 请 先 选择 对 象 的 类 型 +# 转 


: 回 选择 ;| +++++++tt 辆 ie 国 
〇 输入: 
an 


图 10-17 “改变 属性 ”对 话 框 


Q 对象 类 型 : 在 下 拉 列 表 框 中 选择 要 更 改 其 属性 的 对 象 的 类 型 。 

加 命名 对 象 : 在 下 拉 列 表 框 中 列 出 了 所 有 所 选 类 型 的 命名 对 象 。 从 中 选择 要 改变 
的 对 象 的 名 称 。 

@ 属性 : 在 下 拉 列 表 框 中 选择 一 个 属性 ,或 在 文本 框 中 输入 该 属性 的 名 称 。 

@ 新 的 值 : 在 该 文本 框 中 输入 该 属性 的 新 值 。 

(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 

【实例 10-4】 利用 层 和 改变 属性 行为 创建 网 页 导航 条 ,效果 如 图 10-18 所 示 。 


EE 
文件 四 ”编辑 中 查看 WD 收 疗 由 工具 G) 帮助 0 


四 与 -四 - 国 国 的 甩 症 丙 tx 四- 生 国 - 混 


瑞 奸 国策 z:wymveb\chaaee hl 


图 10-18 网 页 导航 条 效果 
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(1) 新 建 网 页 ,将 “插入 ”工具 栏 切换 为 “布局 ”选项 卡 , 单 击 “ 绘 制 层 ”按钮 阁 , 在 文档 
窗口 中 绘制 4 个 层 ,可 以 通过 执行 “修改 ”>“ 排 列 顺序 ”>“ 设 成 高 度 相同 ”|“ 设 成 宽度 相 
同 ” 命 令 和 “修改 ”一 “排列 顺序 ”>“ 对 齐 上 缘 ”| “对齐 下 缘 ” 命 令 将 4 个 层 对 齐 且 大 小 相 
同 ,并 在 “属性 ”面板 中 将 背景 颜色 设 为 # CCFFFF, 如 图 10-19 所 示 。 


WE:\nyveb\change. htal (XHTHL)* 


图 10-19 添加 4 个 层 


(2) 分 别 在 4 个 层 中 插入 一 个 1 行 1 列 ,宽度 为 100% ,边框 为 0 的 表格 ,并 输入 导航 
文本 ,如 图 10-20 所 示 。 


ME:\nyveb\change. htal (XHTHL)* 


图 10-20 输入 导航 文本 


(3) 为 导航 文字 设置 空 链接 , 即 选中 文本 ,在 “属性 ”面板 中 的 “链接 ”文本 框 中 输入 # 
号 ,并 单 击 “ 页 面 属性 ”按钮 ,打开 “页 面 属性 ”对 话 框 ,在 “链接 ”分 类 选项 中 将 “链接 颜色 ” 
和 “已 访问 链接 ” 设 为 红色 ,在 "下划线 样式 ”下 拉 列 表 框 中 选择 “ 仅 在 变换 图 像 时 显示 下 划 
线 ”, 如 图 10-21 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 创建 链接 ,如 图 10-22 所 示 。 

(4) 选中 第 1 个 “首页 ” 层 , 单 击 “ 行 为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 
“改变 属性 ”选项 ,打开 “改变 属性 ”对 话 框 ,在 该 对 话 框 中 的 “对 象 类 型 "下 拉 列 表 框 中 选择 
DIV,“ 命 名 对 象 ” 选 项 中 选择 该 层 编 号 ,“ 属 性 ”选择 style. backgroundColor, 在 “新 的 值 ” 
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| 《 同 页 面 字体 》 


: ES 了 9 

:如 | 变换 图 入 链接 @): [| 
[Dd 活动 链接 他): 全 | 
妈 在 变换 图 像 时 显示 下 地 


图 10-21 “页 面 属性 ?对 话 框 


DE:\nyveb\change. htal (XHTEL)* 


图 10-22 ”创建 链接 
文本 框 中 输入 #CCFFCC, 如 图 10-23 所 示 。 单 击 “ 确 定 ” 按 钮 。 在 “行为 ”面板 中 将 触发 
事件 改 为 onMouseOver 事件 。 


rv 


aiv “Layer2” 


属性 ，@ 选择 ”|styl。 backerounacolor 国 


O 给 入 : 
新 的 值 。 [|#ccFFcc] 


图 10-23 设置 属性 


(5) 利用 相同 的 方法 再 为 “首页 ” 层 添加 “改变 属性 ”行为 “改变 属性 ”对 话 框 中 的 “对 
象 类 型 "“ 命 名 对 象 ”“ 属 性 ”选项 与 步骤 (4) 设 置 相 同 ,“ 新 的 值 ” 文 本 框 输入 #CCFFFF， 
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单 击 “确定 ”按钮 。 在 “行为 ”面板 中 将 触发 事件 改 为 onMouseOut 事件 。 

(6) 重复 步骤 (4) 和 步骤 (5) 为 其 他 3 个 层 添加 “改变 属性 "行为 。 

注意 : 在 “改变 属性 ”对 话 框 中 要 正确 选择 “命名 对 象 ”。 

(7) 保存 网 页 , 按 F12 键 预览 。 当 鼠标 移 至 层 上 时 , 层 背 景 颜色 由 原来 的 蓝 色 变 为 
绿色 。 


10.2.6 拖 动 层 


允许 浏览 者 在 访问 网 页 时 随意 拖 动 层 ,使 用 此 动作 可 以 创建 拼图 游戏 、 滑 块 控件 和 其 
他 可 移动 的 界面 元 素 。 

添加 * 拖 动 层 "行为 的 操作 步骤 如 下 : 

(1) 在 网 页 文档 中 ,绘制 一 个 层 ,打开 ”行为 "面板 。 

(2) 单 击 “ 行 为 ?面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “ 拖 动 层 ” 选 项 ,打开 * 拖 
动 层 ” 对 话 框 ,显示 “基本 ”选项 卡 面板 ,如 图 10-24 所 示 ,其 中 各 项 含义 如 下 所 述 。 


层 : [ 层 “Layerl” 
移动 : [不 限制 国 | 


放下 目标 : 左 : 厂 ” ] 上 : [|] [到 得 目前 
靠 齐 距离 : ”| 像素 接近 放下 目标 


图 10-24 “ 拖 动 层 ” 对 话 框 “基本 ”面板 


Q@ 层 : 在 下 拉 列 表 框 中 选择 要 拖 动 的 层 的 名 称 。 

@ 移动 : 设置 层 的 移动 范围 是 否 受 限制 。 

@ 放下 目标 : 在 文本 框 中 输入 数值 ,是 相对 于 浏览 器 左上 角 的 距离 ,用 于 确定 该 层 
的 目的 点 坐标 。 

@ 靠 齐 距离 : 输入 一 个 值 ,只 有 当 层 被 拖 动 到 与 目的 点 距离 小 于 此 数值 时 , 层 才 会 
被 认为 移动 到 了 目的 点 并 且 自 动 拖 放 到 指定 目的 点 上 去 。 

(3) 单 击 对 话 框 上 的 “高 级 ”选项 卡 ,切换 到 “高 级 ”面板 ,如 图 10-25 所 示 , 其 中 各 项 
含义 如 下 所 述 。 


扼 动 控制 点 : | 可 个 屋 “ 国 
扼 动 时 : 回 将 层 移 至 最 前 ， 然 后 | 留 在 最 上 方 ” 国 
呼叫 JavaScript: 


放下 时 : 呼叫 JavaScript:[ 


图 10-25 “高 级 ”面板 
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Q@ 拖 动 控制 点 : 设置 能 拖 动 层 的 位 置 。“ 整 个 层 " 表 示 在 层 上 的 任意 一 点 都 可 以 拖 
动 层 ;* 层 内 区 域 " 表 示 在 文本 框 中 指定 拖 动 层 中 的 某 个 区 域 , 层 才能 被 拖 动 。 

@ 拖 动 时 : 将 层 移 至 最 前 : 在 层 拖 动 时 将 层 移动 到 最 前 面 , 然 后 在 其 下 拉 列 表 中 选 
择 “ 留 在 最 上 方 ” 表 示 拖 动 后 将 层 停留 在 最 前 方 ;选择 “恢复 Z 轴 ” 表 示 拖 动 后 返回 到 原来 
在 栈 中 的 层次 。 

@ 呼叫 JavaScript: 输入 JavaScript 代码 或 者 是 JavaScript 函数 名 , 当 层 被 拖 动 时 ， 
这 个 函数 和 代码 会 不 断 地 被 重复 执行 。 

@ 按 下 时 : 输入 JavaScript 代码 或 者 函数 名 称 。 当 访问 者 松 开 鼠标 时 ,就 会 执行 这 
个 方 框 中 所 指明 的 JavaScript 代码 或 函数 。 

@ 只 有 在 靠 齐 时 : 选中 该 复 选 框 , 只 有 当 层 放 下 并 且 到 达 指 定 的 位 置 后 , 才 执行 该 
行为 中 的 JavaScript 代码 和 函数 。 

(4) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 

【实例 10-5】 为 网 页 添加 公告 栏 。 公 告 栏 一 般 作为 网 页 的 附属 页 面 ,可 以 随意 在 网 
页 中 移动 ,本 例 将 利用 “ 拖 动 层 ” 行 为 来 实现 该 效果 ,如 图 10-26 所 示 。 


文件 下) ”编辑 下 ) 查看 WD 收 芷 他) 工具 GD) 帮助 o 
-日 .四国 的 Pe 次 wmx @@| 合 -号 国 : 电 
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网 站 19 日 ( 星 
烟 二 ) 下 午 2:00 举 办 夏 日 扩 | YOU gre the siar 咱 
肤 网 上 教学 活动 ， 请 各 位 网 
友 准 时 参加 ， 谢 谢 ! 


加 二 回回 男 


图 10-26 公告 栏 页 面 


(1) 打开 需要 添加 公告 栏 的 网 页 文件 ,如 图 10-27 所 示 。 
(2) 在 “布局 ?插入 工具 栏 中 , 单 击 “绘制 层 "按钮 罚 , 在 网 页 任意 位 置 绘制 一 个 层 , 如 
图 10-28 所 示 。 
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图 10-28 插入 层 


(3) 将 鼠标 定位 在 层 中 ,执行 “插入 ”一 “表格 ”命令 ,插入 一 个 2 行 1 列 的 ,宽度 为 
100% ,边框 粗细 为 1, 颜 色 为 蓝 色 的 表格 ,如 图 10-29 所 示 。 

(4) 将 鼠标 定位 在 第 1 行 中 ,在 “属性 ”面板 中 ,设置 背景 颜色 为 黑色 ,输入 文本 “公告 
栏 ”, 设 置 字体 为 黑体 ,大 小 为 24, 颜 色 为 白色 ,居中 对 齐 显 示 , 如 图 10-30 所 示 。 
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(5) 将 鼠标 定位 在 第 2 行 中 ,在 “属性 ?面板 中 ,设置 背景 颜色 为 #fCCCCCC, 垂 直 对 齐 
方式 为 顶端 ,输入 公告 内 容 , 设 置 字体 大 小 为 18, 如 图 10-31 所 示 。 

(6) 单 击 “ 行 为 "面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 * 拖 动 层 * 选 项 ,打开 * 拖 
动 层 ” 对 话 框 ,如 图 10-32 所 示 。 根 据 需 要 进行 设置 , 单 击 “ 确 定 ” 按 钮 。 在 “行为 ”面板 中 
检查 触发 事件 是 否 为 onLoad 事件 。 

(7) 保存 网 页 , 按 F12 键 预览 。 该 公告 栏 可 以 利用 鼠标 拖 放 到 网 页 的 任意 位 置 。 
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你 快 快 加 入 我 人 


一 目 
ver x S53v 26 K/ 4] 


不 限制 国 
上 :i ] [取得 目前 位 置 


像素 接近 放下 目标 


图 10-32 “ 拖 动 层 "对 话 框 


10.2.7 显示 -隐藏 层 


显示 、 隐 藏 或 恢复 一 个 或 多 个 层 的 可 见 性 ,此 行为 常常 被 用 来 显示 提示 信息 ,例如 , 当 
用 户 将 鼠标 指针 放 在 某 个 图 像 或 文字 上 时 ,可 以 显示 一 句 或 一 段 话 ,作为 提示 用 户 的 信 
息 ,起 到 很 好 的 引导 作用 。 

添加 “显示 -隐藏 "行为 的 操作 步骤 如 下 : 

(1) 选择 需 添加 该 行为 的 层 ,打开 “行为 "面板 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+. 按 钮 ,从 弹出 的 快捷 菜单 中 选择 “显示 -隐藏 层 ” 选 项 , 打 
开 “ 显 示 - 隐 藏 层 ” 对 话 框 ,如 图 10-33 所 示 ,其 中 各 项 含义 如 下 所 述 。 

@ 命名 的 层 : 该 列表 中 列 出 了 该 文档 中 所 有 存在 的 层 的 名 称 , 选 择 要 更 改 其 可 见 性 
的 层 。 

@ [一] 按钮 : 单 击 该 按钮 表示 显示 该 层 。 
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‘Layer2” 
层 “Layer3” 


显示 ] [ 隐 若 


图 10-33 “显示 -隐藏 层 ” 对 话 框 


Q [村 按钮 : 单 击 该 按钮 表示 隐藏 该 层 。 

@ 本] 按钮 : 单 击 该 按钮 表示 恢复 层 的 默认 可 见 性 。 

(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 

【实例 10-6】 为 实例 10-5 中 的 公告 栏 添加 关闭 按钮 ,实现 公告 栏 窗口 的 关闭 。 

(1) 将 鼠标 移 至 第 1 行 中 , 单 击 * 属 性 ?面板 中 的 “ 拆 分 ?按钮 兹 ,将 单元 格 拆 分 为 2 
列 , 如 图 10-34 所 示 。 

(2) 将 鼠标 移 至 第 1 行 第 2 列 中 ,执行 “插入 ”一 图像” 命令 ,插入 关闭 按钮 图 标 ,如 
图 10-35 所 示 。 选 中 该 图 标 ,在 “属性 ”面板 中 的 “链接 "文本 框 中 输入 # 号 ,在 “替换 "文本 
框 中 输入 关闭 。 


图 10-34 拆 分 单元 格 图 10-35 插入 关闭 按钮 


(3) 选中 该 按钮 , 单 击 “ 行 为 "面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “显示 - 隐 
藏 层 ” 选 项 ,打开 “显示 -隐藏 层 ” 对 话 框 ,在 “命名 的 层 ” 列 表 中 选中 该 公告 栏 层 , 单 击 “ 隐 
藏 "按钮 ,如 图 10-36 所 示 。 单 击 “ 确 定 ” 按 钮 。 在 “行为 ”面板 中 检查 触发 事件 是 否 为 
onClick 事件 。 


TLayerg™ 


“Layer20" | 
下 “Layerll 


[时 ] [BR] (BA] 


图 10-36 “显示 -隐藏 层 ” 对 话 框 


(4) 保存 网 页 , 按 F12 键 预览 ,效果 如 图 10-37 所 示 。 当 单 击 关 闭 按 钮 人 @, 公 告 栏 窗 
口 将 关闭 ,如 图 10-38 所 示 。 
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于 首页 - 于 crozoft Internet Ezplorer 
文件 四 忽 缉 中 ”查看 中” 收 豪 遇 工具) 帮助 


" 目 - 国 国信 有 要 交 wx 如 全 -各 


| 箭 F- \myrweb\ 网 站 \ 首 页 htnl 


Wyou psiiste co 


站 宁国 回 加 


图 10-37 添加 关闭 按钮 效果 


t Internet Explorer 


文件 中 ”篇 辑 电 ) 查看 外 收藏 他 工具 G) 帮助 吕 


@sa- 日 - 国 国 的 时光 Wx 人 @ 卫 - 愉 国 -为 


直 加 [图 fi10:///E: /rweb/ 网 站 /首页 htnz# 


美容 网 亿 快 加 入 我 们 吧 ! 


WWhty © Uip sulot ena0on Yov are the siar ll 


防 本 热点 推荐 种 晤 朝 防 呈 大 


装 让 他 i 
精致 彩妆 打造 神 


图 10-38 关闭 公告 栏 窗口 
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【实例 10-7】 利用 “显示 -隐藏 层 ” 行 为 制作 弹出 式 菜单 ,如 图 10-39 所 示 。 


E20 
文件 (E) 编辑 (5) 可 看 9) 收藏 (6) 工具 (T) 帮助 (H) 
Bi @ -回国 从 | Pi 内 Wx @| 会 -如 加 -各 


汇 直 0) 个 E:\nyveb\xlcd.htnl 


Google | 


图 10-39 动态 下 拉 菜 单 


弹出 式 菜单 通常 是 在 网 页 中 由 鼠标 指针 来 触发 的 导航 菜单 效果 , 当 鼠 标 指针 移动 到 
导航 对 象 上 ,就 会 弹出 菜单 。 当 鼠标 指针 从 导航 对 象 上 移 开 ,弹出 菜单 自动 消失 。 利 用 
“显示 -隐藏 层 ” 行 为 可 以 制作 出 该 效果 ,其 具体 制作 步骤 如 下 : 

(1) 新 建 网 页 ,插入 一 个 1 行 3 列 、 宽 为 600 像素 的 无 边框 表格 ,在 表格 中 分 别 插入 
3 个 Flash 按钮 ,如 图 10-40 所 示 。 


网 E:\mywveb\xrlcd.htal (XHTML)* 


ey FPPPPPPR ;POPP Les FPP PPP 


图 10-40 插入 Flash 按钮 


(2) 在 “布局 ?插入 工具 栏 中 , 单 击 “绘制 层 " 按 钮 莘 , 在 “电影 ?按钮 下 方 绘制 一 个 层 ， 
命名 为 L1, 如 图 10-41 所 示 。 
(3) 将 鼠标 置 于 层 内 ,插入 一 个 4 行 1 列 、 宽 度 为 100%% 的 边框 为 2 的 表格 ,在 “属性 ” 
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BE:\nyveb\xlcd. htal (XHTHTL)* 
po pr 


图 10-41 绘制 层 


面板 中 ,将 “背景 颜色 ”设置 为 #FFCCFF,“ 边 框 颜色 ”设置 为 #CC66FF。 在 表格 中 分 别 输 
人 菜单 内 容 ,设置 字体 为 黑体 ,大 小 为 16 ,居中 对 齐 显示 ,如 图 10-42 所 示 。 


网 E:\myveb\xlcd.htal (XHTHL)* 
my PRP OR PR 0 


图 10-42 制作 下 拉 莱 单 


(4) 选中 “电影 ”按钮 , 单 击 “ 行 为 ”面板 中 的 |+, 按 钮 ,从 弹出 的 快捷 菜单 中 选择 “ 显 
示 - 隐 藏 层 ” 选 项 ,打开 “显示 -隐藏 层 ” 对 话 框 ,在 该 对 话 框 的 “命名 的 层 ” 列 表 框 中 选择 层 
“L1”, 单 击 “ 显 示 ” 按 钮 以 显示 该 层 , 如 图 10-43 所 示 。 

(5) 单 击 “ 确 定 ” 按 钮 ,完成 “显示 层 ” 行 为 的 添加 .并 在 “行为 ”面板 中 把 触发 事件 设置 
为 onMouseOver。 
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图 10-43 设置 显示 层 


(6) 重复 步骤 (4) 操 作 , 单 击 “ 隐 藏 ”按钮 以 隐藏 该 层 ,如 图 10-44 所 示 , 完 成 “隐藏 层 ” 
行为 的 添加 ,并 把 触发 事件 设置 为 onMouseOut。 


命名 的 层 : 


[2] 区 而 ] [RAJ 


图 10-44 设置 隐藏 层 


(7) 选中 层 L1, 在 其 “属性 ”面板 中 的 “可 见 性 ”下 拉 列 表 中 选择 hidden, 如 图 10-45 所 
示 。 这 样 就 可 以 实现 在 网 页 打开 时 该 下 拉 菜 单 是 不 可 见 的 。 


础 上 青 景 图 像 [ 


可 见 性 | teteut 国 外 


default 
inherit 
lvisible 


图 10-45 设置 可 见 性 


(8) 保存 网 页 , 按 F12 键 预览 , 当 鼠 标 光 标 放置 在 “电影 ”按钮 上 时 ,将 会 出 现下 拉 菜 
单 , 移 开 按钮 时 ,下 拉 菜 单 将 会 隐藏 。 
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10.2.8 显示 弹出 式 菜单 


在 实例 10-7 中 ,利用 “显示 -隐藏 层 ”行为 制作 出 了 弹出 式 菜单 效果 ,但 步 又 烦琐 。 其 
实在 Dreamweaver 8. 0 中 有 一 种 快速 简单 的 制作 弹出 式 菜单 的 方法 , 那 就 是 利用 “显示 弹 
出 式 菜单 ”行为 。 

添加 “显示 弹出 式 菜单 "行为 的 操作 步骤 如 下 : 

(1) 选择 需 添加 该 行为 的 图 像 或 链接 ,打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 中 的 [+ 按钮 ,从 弹出 的 快捷 菜单 中 选择 “显示 弹出 式 菜单 ” 选 
项 ,打开 “显示 弹出 式 菜单 ”对 话 框 ,如 图 10-46 所 示 , 其 中 各 项 含义 如 下 所 述 。 


显示 弹出 式 菜单 
内 容 | 外 现 珊 级 位置 


羔 单 : 是 到 | 区 回 
文本 : 曾 和 | ] 目标 : 国 
|] 


图 10-46 “显示 弹出 式 菜单 "对 话 杠 


中“ 内 容 ? 选 项 卡 : 用 于 设置 各 菜单 项 的 名 称 、 结 构 ,链接 和 目标 。 


© 


菜单 : 对 列表 中 的 菜单 项 进行 操作 。 后 用 于 在 列表 中 添加 一 个 新 的 菜单 项 ;启用 
于 在 列表 中 删除 一 个 新 的 菜单 项 ; 加 用 于 使 菜单 项 左 缩 进 显示 ; 下 用 于 使 菜单 项 
右 缩 进 显示 ;| 实用 于 上 移 选中 的 菜单 项 的 位 置 ; 忆 用 于 下 移 选 中 的 菜单 项 的 
位 置 。 

文本 : 输入 要 显示 在 弹出 式 菜单 中 的 文本 。 

链接 : 为 不 同 的 菜单 项 设置 不 同 的 链接 ,在 “链接 ”文本 框 中 输入 链接 目标 文件 路 
径 或 单 击 文件 夹 图 标 并 浏览 选择 要 打开 的 文档 。 

目标 : 选择 打开 链接 的 方式 。 

“外 观 ?选项 卡 : 用 于 设置 菜单 项 “一 般 状态 * 和 * 滑 过 状态 ”的 外 观 以 及 设置 菜单 


项 文本 的 字体 ,如 图 10-47 所 示 。 


区 域 中 : 在 该 列表 框 中 选择 菜单 的 显示 方式 是 “垂直 菜单 ”还 是 “水 平 菜单 ”。 
区 域 @: 在 该 区 域 中 设置 菜单 项 的 文字 的 文本 格式 。 

区 域 @®: 用 于 设置 菜单 项 的 "一般 状态 ”和 “ 滑 过 状态 ”的 外 观 。 

区 域 @@: 显示 菜单 设置 后 的 预览 效果 。 
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图 10-47 “外 观 ” 选 项 卡 
@@“ 高 级 ”选项 卡 : 设置 菜单 项 单元 格 的 属性 ,如 图 10-48 所 示 。 


显示 弹出 式 菜单 


[内容 外 观 「 高 级 | 位 置 一、 


单元 格 宽度 : 上 [自动 ] 
单元 格 高 度 : 国 [自动 国 
单元 格 边 距 : G8 ] 文本 缩 进 : [0 | 
单元 格 间距 : 0 ] 率 单 延迟 : [1000 
弹出 式 来 单 边 杠 : 
边框 宽度 : : 
边 枢 闫 色 : 图。 高 亮 显示 : 辐 


图 10-48 “高 级 ”选项 卡 


单元 格 宽度 : 为 菜单 项 设置 一 个 特定 的 宽度 (以 像素 为 单位 )。 单 元 格 宽度 是 根 
据 最 宽 的 项 自动 设置 的 ; 若 要 改变 单元 格 宽度 ,可 以 在 下 列 列表 框 中 选择 “像素 ”， 
然后 在 文本 框 中 输入 相应 的 值 。 

单元 格 高 度 : 为 菜单 项 设置 一 个 特定 的 高 度 ( 以 像素 为 单位 )。 单 元 格 高 度 是 根 
据 最 宽 的 项 自动 设置 的 ; 若 要 改变 单元 格 高 度 , 可 以 在 下 列 列表 框 中 选择 “像素 ”， 
然后 在 文本 框 中 输入 相应 的 值 。 

单元 格 边 距 : 指定 单元 格 内 容 和 其 边框 之 间 的 像素 数 。 

”单元 格 间距 : 指定 相 邻 单元 格 之 间 的 像素 数 。 

。 文 本 缩 进 : 可 以 指定 菜单 项 中 的 文本 在 单元 格 中 的 缩 进 距离 (以 像素 为 单位 ) 。 

。 菜单 延迟 : 设置 从 用 户 将 鼠标 指针 移动 到 触发 图 像 或 链接 上 ,到 菜单 出 现 之 间 的 
时 间 间 隔 。 该 值 以 毫秒 为 单位 ,因此 默认 设置 1000 相当 于 1s。 
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。 弹出 式 菜单 边框 : 确定 菜单 项 周围 是 否 显示 边框 。 
。 边框 宽度 : 设置 边框 的 宽度 (以 像素 为 单位 ) 。 
。 阴影 ,边框 颜色 和 高 亮 显 示 : 允许 为 这 些 边框 选择 颜色 。 阴 影 和 高 亮 显示 不 反映 
在 预览 中 。 
@ “位 置 ”选项 卡 : 可 以 设置 菜单 相对 于 触发 图 像 或 链接 的 放置 位 置 ,如 图 10-49 
所 示 。 


显示 弹出 式 菜单 
内 容 | 外 观 | 高 级 位 置 


来 单位 置 : 国 回 回国 


Xx:B7] Y:B7] 


回 在 发 生 onllouseout 事件 时 隐 蕊 莱 单 


图 10-49 “位 置 " 选 项 卡 


。 菜单 位 置 : 可 以 设置 弹出 式 菜 单 出 现 的 位 置 ,其 中 包括 * 右 下 角 ”“ 底 部 左边 缘 ”、 
“顶部 左边 缘 * 和 “右上 边缘 ”。 如 果 对 以 上 4 个 位 置 都 不 满意 ,可 以 自 定义 位 置 ， 
方法 是 在 “X" 文 本 框 中 输入 一 个 数字 设置 水 平 坐 标 ,在 “Y" 文 本 框 中 输入 一 个 数 
字 设 置 垂直 坐标 。 坐 标 以 菜单 的 左上 角 为 基准 计算 。 

。 回 在 发 生 onllouseout 事件 时 隐 蒸 六 单 : 选中 该 项 ,表示 当 鼠 标 离开 触发 器 就 隐藏 菜单 。 

(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 


10.2.9 检查 表单 


检查 表单 用 于 检查 文本 域 的 内 容 , 以 确保 用 户 输入 了 正确 的 数据 类 型 。 使 用 onBlur 
事件 将 此 动作 分 别 附 加 到 各 文本 域 ,在 用 户 填 写 表 单 时 对 域 进行 检查 ;或 使 用 onSubmit 
事件 将 其 附加 到 表单 ,在 用 户 单 击 * 提 交 ” 按 钮 时 同时 对 多 个 文本 域 进行 检查 。 使 用 该 行 
为 可 以 防止 表单 提交 到 服务 器 后 指定 的 文本 域 包 含 无 效 的 数据 。 

添加 “检查 表单 ”行为 的 操作 步骤 如 下 : 

(1) 打开 包含 表单 的 页 面 , 若 要 在 用 户 填写 表单 时 分 别 检查 各 个 域 , 可 选择 一 个 文本 
域 , 若 要 在 用 户 提交 表单 时 检查 多 个 域 , 则 在 “文档 ”窗口 左下 角 的 标签 选择 器 中 单 击 
去 form> 标 签 ,并 打开 ”行为 面板 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+ 按钮 ,从 弹出 的 菜单 中 选择 “检查 表单 ”, 打 开 “ 检 查 表 


单 ” 对 话 框 ,如 图 10-50 所 示 , 其 中 各 项 含义 如 下 所 述 。 
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“textfield2” 表 早 “foral” 
文本 “textarea” 在 表单 “foral 


值 : 口 必需 的 
可 接受 : @ 任何 东西 。 〇 数字 
C 〇 电子 邮件 地 址 〇 数字 从 [|] 到 [ ] 


图 10-50 “检查 表单 ”对 话 框 


@ 命名 的 栏 位 : 该 列表 中 出 现 的 是 当前 页 面 中 已 有 的 表单 元 素 ,选择 需要 验证 的 表 
单元 素 。 

回 必需 的 : 如 果 该 域 必须 包含 某 种 数据 , 则 选择 “必需 ”选项 。 

@ 可 接受 : 从 该 选项 中 选择 一 个 选项 。 如 果 该 域 是 可 以 包含 任何 类 型 的 数据 , 则 选 
择 * 任 何 数据 ;使 用 "电子 邮件 地 址 ?检查 该 域 是 否 包含 一 个 @ 符 号 ;使 用 "数字 ”检查 该 域 
是 否 只 包含 数字 ;使 用 “数字 从 ”检查 该 域 是 否 包含 特定 范围 内 的 数字 。 

(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 


10.2.10 设置 文本 


“设置 文本 ”行为 中 有 4 种 选项 ,分 别 为 设置 层 文本 .设置 文本 域 文字 、 设 置 框架 文本 
及 设置 状态 栏 文本 。 


1. 设置 层 文本 


功能 : 用 指定 内 容 替 换 某 一 页 面 上 层 的 内 容 和 格式 设置 。 

添加 “设置 层 文本 ”行为 的 操作 步骤 如 下 : 

(1) 在 页 面 中 绘制 一 个 层 ,并 选中 该 层 。 

(2) 单 击 “ 行 为 ”面板 中 的 | +, 按钮 ,从 弹出 的 菜单 中 选择 “设置 文本 ”一 “设置 层 文本 ” 


命令 ,弹出 “设置 层 文本 ”对 话 框 ,如 图 10-51 所 示 ,其 中 各 项 含义 如 下 所 述 。 


强 层 "Layerl” 


图 10-51 “设置 层 文本 ”对 话 框 


QD 层 : 在 下 拉 列 表 框 中 列 出 了 所 有 的 层 , 在 其 中 选择 要 操作 的 层 。 
加 新 建 HTML: 在 文本 框 中 输入 要 替换 内 容 的 HTML 代码 。 
(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 
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2. 设置 文本 域 文字 


功能 : 用 用 户 指定 的 内 容 蔡 换 表单 文本 域 中 原 有 的 内 容 。 在 表单 的 文本 域 中 可 以 为 
文本 域 指定 初始 值 ,初始 值 也 可 以 为 空 。 

添加 “设置 文本 域 文字 ”行为 的 操作 步骤 如 下 : 

(1) 在 页 面 中 插入 表单 对 象 文本 域 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+J 按 钮 ,从 弹出 的 菜单 中 选择 “设置 文本 ”>“ 设 置 文本 域 
文字 ”命令 ,弹出 “设置 文本 域 文字 ”对 话 框 ,如 图 10-52 所 示 , 其 中 各 项 含义 如 下 所 述 。 


文本 “textfield” 在 表单 “fornl” 国 


图 10-52 “设置 文本 域 文 字 ” 对 话 框 


中 文本 域 : 在 下 拉 列 表 框 中 列 出 了 所 有 的 文本 域 对 象 ,在 其 中 选择 要 操作 的 文 
本 域 。 

@ 新 建文 本 : 在 文本 框 中 输入 文本 内 容 。 

(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 


3. 设置 框架 文本 


功能 : 动态 地 改变 框架 中 显示 的 文字 或 蔡 换 框架 内 容 。 

添加 “设置 框架 文本 ”行为 的 操作 步骤 如 下 : 

(1) 在 页 面 中 添加 框架 ,选中 此 框架 。 

(2) 单 击 “行为 "面板 中 的 [+ 按钮 ,从 弹出 的 菜单 中 选择 “设置 文本 ”设置 框架 文 
本 ”命令 ,弹出 “设置 框架 文本 ”对 话 框 ,如 图 10-53 所 示 ,其 中 各 项 含义 如 下 所 述 。 


避 框 架 "lettrrae” 国 


图 10-53 “设置 框架 文本 ”对 话 框 


g@ 框架 : 在 该 下 拉 列 表 框 中 列 出 了 所 有 的 框架 ,在 其 中 选择 要 操作 的 框架 。 
@ 新 建 HTML: 在 该 文本 框 中 输入 要 替换 内 容 的 HTML 代码 。 
@ 获取 当前 HTML: 单 击 该 按钮 ,可 将 当前 框架 中 的 源 代码 内 容 显示 到 “新 建 
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HTML” 文 本 区 域 中 ,以 便 在 现 有 的 框架 文档 基础 上 进行 修改 。 
(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 


4. 设置 状态 栏 文本 


功能 : 可 用 于 在 浏览 器 窗口 底部 左 侧 的 状态 栏 中 显示 消息 。 例 如 , 当 把 鼠标 指针 移 
动 到 一 个 链接 上 时 ,状态 栏 上 就 会 显示 链接 指向 的 URL 地 址 。 应 用 “设置 状态 栏 文本 ” 
行为 ,可 以 重新 设置 当前 事件 触发 时 状态 栏 上 的 提示 信息 内 容 。 

添加 "设置 状态 栏 文本 ”行为 的 操作 步骤 如 下 : 

(1) 选择 需要 添加 该 行为 的 对 象 ,打开 “行为 ”面板 。 

(2) 单 击 “行为 ”面板 中 的 [+ 按钮 ,从 弹出 的 菜单 中 选择 “设置 文本 ”>“ 设 置 状 态 栏 
文本 ”命令 ,弹出 “设置 状态 栏 文本 ”对 话 框 ,如 图 10-54 所 示 ,在 “消息 "文本 框 中 输入 要 在 
状态 栏 中 显示 的 内 容 。 


设置 状态 栏 文本 
消息 : 


图 10-54 “设置 状态 栏 文 本 ”对 话 框 
(3) 单 击 “确定 ?按钮 ,完成 行为 的 添加 。 
【实例 10-8】 制作 网 页 状态 栏 提示 。 本 实例 实现 当 鼠 标 放 置 在 不 同 的 导航 项 目 上 ， 
可 以 通过 不 同 的 状态 栏 文字 进行 项 目 说 明 , 效 果 如 图 10-55 所 示 。 


erne! Explor 
Er py Er Ez 


Qa: .0s -Op | ie 3 


玄 件 @) 胸 往 区 前 看 QV) i 
@re. 日- 国 国 的 有 Pe 夫 emx 四 | 后 - 瑟 Be 3 


四 全 & mymeh' 拓 而 站 六 未 htnl 


日 志 


区 


图 10-55 不 同 的 状态 栏 文本 提示 


(1) 打开 实例 10-4 创建 的 change. html 网 页 

(2) 选中 第 1 个 项 目 “ 首 页 ”, 单 击 “ 行为 "面板 中 的 [ 瑟 按钮 ,从 弹出 的 快捷 菜单 中 选 
择 “ 设 置 文字 ”>“ 设 置 状 态 栏 文字 ”选项 ,打开 * .设置 状态 栏 文本 "对 话 框 ,在 。 消息 ”文本 框 
中 输入 显示 内 容 , 如 图 10-56 所 示 。 单 击 “ 确 定 ” 按 钮 。 在 “行为 ”面板 中 检查 触发 事件 是 
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否 为 onMouseOver 事件 。 


设置 状态 栏 文本 


消息 : 欢迎 光 临 我 的 小 窝 ? + 4 | 


图 10-56 设置 状态 栏 文本 


(3) 重复 步骤 (2) ,为 其 他 3 个 项 目 “ 日 志 ”“ 相 册 ”“ 留 言 板 ?设置 不 同 的 状态 栏 文 
本 ,如 图 10-57 所 示 。 


设置 状态 栏 文本 


消息 :也 条 硅 半 我 的 情事 吧 
| 设 轩 状态 栏 文本 


消息 : 三 的 生活 全 记录 哆 9 9 9 


| 设置 状 态 栏 文本 


下 | 列 音 畜 ， 说 点 什么 吧 ， 


图 10-57 不 同 的 状态 栏 文本 


(4) 保存 网 页 , 按 F12 键 预览 。 
10.2.11 调用 JavaScript 


调用 JavaScript 允许 用 户 使 用 “行为 ”面板 指定 当 发 生 某 个 事件 时 应 该 执行 的 自 定义 
函数 或 JavaScript 代码 行 ,用 户 可 以 自己 编写 JavaScript 或 使 用 网 络 中 免费 的 JavaScript 
代码 资源 。 

添加 “调用 JavaScript” 行 为 的 操作 步骤 如 下 : 

(1) 选择 需要 添加 该 行为 的 对 象 ,打开 “行为 ”面板 。 

(2) 单 击 “ 行 为 ”面板 中 的 [+J 按 钮 ,从 弹出 的 菜单 中 选择 “调用 JavaScript" 选 项 ,打开 
“调用 JavaScript” 对 话 框 ,如 图 10-58 所 示 , 在 JavaScript 文本 框 中 输入 要 执行 的 函数 或 
JavaScript 代码 。 


调用 JavaScript 


Javaseript:[ | 


图 10-58 “调用 JavaScript” 对 话 框 
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(3) 单 击 “ 确 定 ” 按 钮 ,完成 行为 的 添加 。 


10.3 利用 JavaScript 脚本 制作 特效 


在 网 页 的 设计 过 程 中 ,追求 的 不 只 是 实现 强大 的 功能 ,丰富 多 彩 的 网 页 特效 ,更 为 网 
页 增色 不 少 。 可 以 通过 JavaScript 脚本 语言 来 编写 制作 动态 特殊 效果 ,并 通过 客户 端的 
Web 浏览 器 来 执行 实现 这 些 网 页 特效 。 在 本 教程 的 第 4 章 已 经 初步 对 JavaScript 脚本 进 
行 了 认识 ,下 面 将 通过 几 个 简单 的 实例 来 具体 学 习 如 何 利用 JavaScript 脚本 制作 网 页 
特效 。 


10.3.1 滚动 公告 


滚动 公告 指 的 是 网 页 中 的 一 部 分 信息 内 容 以 循环 滚动 的 方式 显示 。 滚 动 公告 的 好 处 
是 在 一 个 小 的 区 域 中 显示 较 多 的 内 容 。 除 了 滚动 公告 以 外 ,产品 .新闻 等 内 容 也 可 以 是 滚 
动 形式 显示 。 最 简单 的 实现 方法 是 利用 二 marquee 之 标记 ,这 个 标记 是 专门 用 来 制作 水 
平 或 者 垂直 的 滚动 字幕 。 

创建 一 个 marquee 过 标记 需要 以 下 参数 : scrollamount=n, 这 个 参数 表示 字幕 每 移 
动 一 下 的 距离 ,以 像素 为 单位 , 值 越 大 ,速度 越 快 ;scrolldelay 二 n, 这 个 参数 表示 字幕 每 隔 
多 久 移 动 一 次 ,以 毫秒 为 单位 ;direction 二 left/ right/ up/ down, 用 来 设置 滚动 的 方向 , 默 
认 方 式 向 左 ; behavior 二 scroll( 循 环 移动 )/ alternate( 来 回 移动 )/ slide( 只 移动 一 个 回 
合 ) ,用 来 设置 滚动 的 方式 ,bgcolor 用 来 设置 滚动 字幕 的 背景 颜色 。width 和 height 用 来 
设置 滚动 的 宽度 与 高 度 。 

【实例 10-9】 以 实例 10-6 中 创建 公告 栏 窗口 为 例 , 以 添加 代码 的 方法 ,让 公告 内 容 
滚动 起 来 ,其 效果 如 图 10-59 所 示 。 


公告 栏 四 公告 栏 公告 栏 
| | 


本 网 站 将 于 8 月 19 日 (星期 
二 ) 下 午 2:00 举 办 夏 日 护肤 本 网 站 将 于 8 月 19 日 (星期 
网 上 教学 活动 ， 请 各 位 网 友 二 ) 下午 2:00 举 办 夏 日 护肤 本 网 站 将 于 8 月 19 日 (星期 
美容 网 美容 网 美容 网 
2010. 8. 15 2010.8.15 2010.8.15 
(a) 显示 (1) (b) 显示 (2) (0) 显示 (3) 


图 10-59 ”滚动 公告 


(1) 打开 实例 10-6 中 创建 的 首页 . html 文件 。 
(2) 选中 公告 栏 窗口 中 的 内 容 文 本 , 单 击 “ 属 性 ”面板 中 的 “快速 标签 编辑 器 ”按钮 回 ， 
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在 文本 框 中 输入 如 下 代码 :所 marquee scrollamount 一 


蝙 辑 标签 《marquee 


"3" direction=" down" width="230" height="150" ecto 
onmouseover 一 "stop()"”onmouseout 一 "start()" 之 ,如 人 
图 10-60 所 示 。 ormouseout=" start () "> 

(3) 保存 网 页 , 按 F12 键 预览 。 图 10-60 ”编辑 一 marquee> 标 签 


说 明 : 

(1) width 和 height 参数 ; 设置 滚动 的 区 域 大 小 。 

(2) onmouseover 一 "stop()": 表示 当 和 鼠标 放 在 滚动 字幕 上 时 ,字幕 停止 滚动 。 

(3) onmouseout 二 "start()":; 表示 当 鼠 标 移 开 滚动 字幕 时 ,字幕 恢复 滚动 。 

(4) 利用 二 marquee 盖 标记 不 仅 可 以 实现 文字 的 滚动 显示 ,还 可 以 实现 图 片 的 循环 滚 
动 , 请 大 家 自己 试 试 看 。 


10.3.2 自动 变换 文字 颜色 


自动 变换 文字 颜色 是 指 网 页 上 的 文字 不 断 自动 改变 颜色 。 实 现 原理 是 循环 改变 文字 
的 color 属性 值 。 

【实例 10-10】 创建 一 网 页 ,文字 “欢迎 来 到 我 的 小 窝 1” 的 颜色 依次 在 蓝 、 黑 、 红 、 黄 、 
绿 5 种 颜色 中 变化 。 效 果 如 图 10-61 所 示 。 


蓝 色 
文字 
QFE- 昌 -四 国 折 | 记 Rp 支 wRR @| 合 - 马 国 "- 口 “ -四 - 国 国 必 Pi 二 9RR @| 全 -名 国 - 口 
夫 直 0 站] EWnyveb\ 才 名 志 执 .htnl 同 四 和 二 Ee 
红色 
文字 


文件 中 锯 异 加 查看 W) 收 间 人) 工具 CD 大 助 D 
OEE- 昌 * 国 国 闪 | 记 去 WR 人 @| 合 -总 国 - 口 
外 站 相 ] wyveh 县 色 均 换 Mal 同 加 9 _i 


图 10-61 自动 变换 文字 颜色 
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(1) 执行 “文件 一“ 新建" 命令 ,打开 * 新 建文 档 对 话 框 , 在 “类 别 ? 列 表 中 选择 
JavaScript 选项 ,如 图 10-62 所 示 。 单 击 “ 创 建 ” 按 钮 ,创建 JavaScript 文件 ,保存 为 1. js。 


入 门 页 面 
页 面 设计 ( 有 辅助 功能 的 ) 


图 10-62 创建 JavaScript 文件 


(2) 在 1.js 文 件 中 输入 如 下 代码 : 
var usertext= "欢迎 光临 我 的 小 窝 !"; 


Var 和 07 

Var color= new Array ("blue", red "yellow", "green"); 

dbcument.write('< div id= "userdiv"> < center> <b> '+ usertext+ '< /b> < /oanter> < /div> '); 
function change( ) 


4 
ocument .all .userdiv.style.color= oolor [x]; 
(x< color. length- 1)?xt++ :X= 07 
} 
(3) 新 建 网 页 文件 ,将 编辑 窗口 切换 到 “代码 ”视图 。 
(4) 在 二 head 二 二 /head 二 之 间 加 入 代码 二 script type 二 "text/JavaScript" src 王 
"1.js" 盖 <</script> ,调用 1.js 文件 ,如 图 10-63 所 示 。 
(5) 在 二 body 之 标记 中 插入 代码 onload 二 "setInterval('change()',1000);", 如 
图 10-64 所 示 。 表 示 一 旦 载 人 网 页 每 隔 1s 就 触发 一 次 change() 动 作 , 即 每 隔 1s 改变 一 
次 文字 颜色 。 
(6) 保存 网 页 , 按 F12 键 预览 。 
说 明 : 
(1) var color 一 new Array("blue","black","red","yellow","green");: 表示 定义 一 
个 color 数组 。 
(2) document. all. userdiv. style. color: 定义 文档 中 区 块 字体 颜色 。 
(3) setInterval('change()',1000);: 表示 每 隔 1 秒 钟 就 执行 一 次 change() 方 法 。 第 
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前 E: \nyweb\ 颜 色 变 搁 . htal (XHTHTL)* 
《IDOCTYPE htnl PUBLIC “-//¥3C//DID XHTML 1.0 Transitional//EN” 
“http://wew. w3. org/TR/xhtnl1/DID/xhtnll-transitional. dtd”> 

《html xmlns="http://www. w3. org/1999/xhtml”> 

head> 

meta http-equiv="Content-Type” content="text/htnl; charset=gb2312" 
《title》 自 动 变化 文字 颜色 </title> 


图 
条 
此 
EE 
使 
但 
四 


< 回 世 人 也 妆 | 交 


图 10-63 插入 调用 1.js 代码 


换 E: \nyweb\ 颜 色 变 找 .htal (XHTML)* 
<IDOCTYPE html PUBLIC “-//W3C//DID XHTML 1.0 Transitional//EN” 
“http://www. w3. org/TR/xhtnl1/DID/xhtnll-transitional. dtd”> 
《html xnlns="http://wy. wi. org/1999/xhtml”> 

head> 

<meta http-equiv="Content-Type” content="text/html; charset=gb2312” 


《tit1e3 自 动 变 化 文字 颜色 </title> 


ipt type="text/JavaScript” src="1.js” 


[的 | 总 人 | 才 中 妹 | 加 


/body> 
/htnl> 


图 10-64 插入 触发 事件 代码 


一 个 参数 表示 要 调用 的 函数 ,第 二 个 参数 表示 间隔 的 时 间 。 


10.3.3 打字 机 式 字 符 输出 


打字 机 式 字符 输出 特效 可 以 模拟 打字 机 效果 ,将 一 段 文 字 逐 个 字符 地 输出 。 该 效果 
的 设计 原理 是 将 要 显示 的 一 段 文字 作为 一 个 字符 串 存 储 , 每 次 从 字符 串 左边 截取 其 子 串 
显示 ,截取 长 度 以 一 个 字符 为 单位 递增 , 即 可 实现 类 似 打 字 的 效果 。 

【实例 10-11】 创建 一 网 页 ,实现 状态 栏 文字 “欢迎 光临 我 的 小 窜 1” 以 打字 的 特效 显 
示 出 来 。 效 果 如 图 10-65 所 示 。 

(1) 新 建 网 页 文件 ,将 编辑 窗口 切换 到 “代码 ”视图 。 
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当 状态 栏 文字 答 ! 当 状态 栏 文字 输 : 要 状态 栏 文字 答 出 ~ Hicrosoft Internet Explorer 


文件 四 ”编辑 加 | 文件 中 ”编辑 加 | 文件 四” 编 各 加 ”查看 ) 收 诚 和 工具 四 才 助 中 3 
GiE -O19GFE- O19GAFE- © -: 国 四 的 这 妇 Wix @| 合 -各国 ” 
地 址 0) 可]E: my 地 址 四) 和 :myw| 地 址 0) 可] 了 :yweb\ 状 态 栏 文本 输出 . htnl 


WR | 
图 10-65 打字 式 状态 栏 文字 输出 


(2) 在 王 body 之 一 /body 之 之 间 加 入 如 下 代码 : 


< Script language= "UavaScript"> 
var msg= "欢迎 光临 我 的 小 窒 !" /hnsg 变 量 设 定 状态 栏 要 出 现 的 文字 
var interval= 300; // 设 定 间隔 多 长 时 间 文 字 长 度 增加 一 个 
var 0; // 代 表 动 态 的 文字 长 度 
function Scroll () 
{ 

len= msg. length; 

Window.status=msg.substring (0, x+ 1); 

和 十 /动态 文字 的 长 度 加 1 

if (x>=]len) 

{ 

0; 


window.setTimeout ("Scroll ()", interval); 


. // 如 果 动 态 文字 长 度 和 整 句 话 相同 , 则 动态 文字 的 长 度 设 为 0, 重 头 来 过 


else 
window.setTimecut("Scroll ()", interval ); 
} 
Scroll07 
< /script> 


(3) 保存 网 页 , 按 F12 键 预 览 。 

说 明 : 

(1) msg. length: 表示 获取 字符 串 msg 的 长 度 。 

(2) window. status: window 对 象 的 status 属性 用 来 保存 窗口 中 状态 栏 的 内 容 。 

(3) msg. substring(0, x 十 1); 表示 获取 字符 串 msg 的 子 字符 串 。 第 一 个 参数 表示 
从 第 几 个 字符 截取 (0 表示 第 1 个 字符 ) ,第 二 个 参数 表示 一 次 截取 几 个 字符 。 

(4) setTimeout("Scroll()", interval ): 设 定 Scroll( ) 方 法 被 调用 之 前 需要 经 历 
interval 长 的 时 间 。 第 一 个 参数 表示 要 调用 的 函数 ,第 二 个 参数 表示 函数 被 调用 前 的 
时 间 。 
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10.3.4 页面 自动 关闭 ( 跳 转 ) 


在 网 页 中 可 以 使 用 JavaScript 脚本 程序 实现 网 页 的 自动 定时 关闭 (或 跳 转 )。 制 作 自 
动 关闭 ( 跳 转 ) 网 页 有 两 个 要 实现 的 事件 ,一 个 是 要 实现 网 页 停留 时 间 的 计时 , 另 一 个 是 在 
到 达 计 时 时 自动 关闭 ( 跳 转 ) 网 页 。 

【实例 10-12】 制作 自动 关闭 网 页 。 本 实例 将 在 网 页 标题 栏 上 进行 时 间 计时 ,一 旦 
到 达 时 间 将 自动 关闭 网 页 ,效果 如 图 10-66 所 示 。 


Er 收藏 A) 工具 中 ”帮助 人 D — -一 -一 一 -一 一 
en eaaclPnymelea Gas .e- BO Pm gm 6: EE 


二 寺中 | 倍 。vwyvew\ 自 动 关闭 hal 汗 寺 加 | 旬 :wyvew\ 自 动 关闭 htnl 


CCsw 


(a) 初始 窗口 (b) 计时 结束 弹出 关闭 对 话 权 
图 10-66 ”自动 关闭 网 页 


(1) 新 建 网 页 文件 ,将 编辑 窗口 切换 到 “代码 ”视图 。 
(2) 在 二 head 盖 二 /head 二 之 间 加 入 如 下 代码 : 


< script type= "text/javascript"> 


var i=10; // 设 置 定时 
function clock() // 定 义 一 个 clock() 函 数 ,实现 计时 与 时 间 处 理 
{ 
i 
document.title= "本 窗口 将 在 叶 计 吵 后 关闭 1"; 
if(i>0) 
SetTimecut ("clock ()", 1000); 
else 
self.close(); // 到 达 设 定时 间 自 动 关闭 网 页 
} 
clock(); // 调 用 函数 
< /script> 
说 明 : 


(1) document. title: 表示 网 页 文档 的 标题 栏 。 
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(2) setTimeout("clock()",1000);: 实现 计时 。 

(3) self. close(): 表示 关闭 当前 窗口 。 

(4) 如 果 要 将 该 实例 修改 为 自动 跳 转 ,只 需要 将 上 面 代码 的 第 10 行 改 为 "location. 
href(" 跳 转 文件 路 径 和 文件 名 ");” 即 可 。 


10.4 习 题 


一 、 选 择 题 


1. 下 列 关于 行为 的 说 法 中 ,错误 的 是 。 
A. 行为 是 事件 和 动作 的 结合 
B. 使 用 行为 可 以 生成 动态 网 页 效果 
C. 行为 就 是 一 个 动作 
D. 行为 是 Dreamweaver 预 置 的 JavaScript 程序 库 


2. 在 行为 事件 中 ,表示 用 鼠标 单 击 选 定 元 素 而 触发 事件 的 是 
A. Ondblclick B. Onclick C. Onload D. OnMouseOver 
3. 关于 动作 和 事件 ,下 列 说 法 不 正确 的 是 有 


A. 动作 是 由 一 段 预先 写 好 的 JavaScript 代码 所 组 成 
B. 事件 由 浏览 器 为 每 个 页 面 元 素 所 定义 的 

C. 事件 只 能 由 系统 引发 ,不 能 自己 引发 

D. 事件 可 以 自动 引发 


二 、 操 作 题 
1. 制作 一 个 网 页 ,在 网 页 被 浏览 器 关闭 时 ,弹出 如 图 10-67 所 示 的 对 话 框 。 


Microsoft Internet Explorer |X| 


LN ems 


要 
图 10-67 弹出 信息 


2. 利用 JavaScript 脚本 代码 ,制作 自动 跳 转 网 页 。 
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网 站 的 测试 与 发 布 


在 完成 站 点 的 制作 后 ,就 需要 将 站 点 上 传 到 用 户 指定 的 Web 服务 器 上 ,以 便 供 浏览 
者 浏览 观看 。 想 让 一 个 站 点 能 够 正常 地 运行 ,还 需要 进行 其 他 几 个 步骤 的 操作 ,才能 保证 
站 点 内 容 及 链接 的 准确 性 ,如 测试 网 站 .申请 站 点 域名 .站 点 内 容 上 传 以 及 站 点 的 维护 等 。 
本 章 将 简要 介绍 测试 网 页 的 方法 ,并 详细 介绍 申请 域名 和 主页 空间 的 方法 ,以 及 网 站 推广 
的 技巧 。 


本 章 学 习 要 点 : 


。 测试 网 页 的 方法 

。 域 名 与 空间 的 申请 方法 
。 发布 网 站 

。 推 广 站 点 的 方式 


11.1 网 站 的 测试 


在 完成 了 本 地 站 点 所 有 页 面 的 设计 之 后 ,必须 经 过 必要 的 测试 工作 , 当 网 站 能 够 稳定 
地 工作 后 , 才 可 以 将 站 点 上 传 到 远程 Web 服务 器 上 ,成 为 真正 的 站 点 。Dreamweaver 8.0 
能 够 很 轻松 地 完成 站 点 的 测试 。 本 地 测试 包括 链接 测试 ,不 同 浏览 器 的 测试 和 不 同 分 辩 
率 的 测试 等 。 


11.1.1 测试 链接 


一 个 网 站 是 由 十 几 个 甚至 几 百 个 网 页 组 成 的 ,而 网 页 之 间 是 通过 超 链接 来 联系 的 。 
如 果 一 个 网 页 没有 添加 超 链 接 ,或 者 超 链 接 添加 错误 ,那么 就 无 法 找到 该 网 页 。 所 以 在 制 
作 完 成 一 个 网 站 后 ,首先 要 检查 网 站 中 的 超 链接 是 否 正确 。 

测试 的 具体 操作 步 又 如 下 : 

(1) 打开 网 站 中 的 需要 检查 的 网 页 。 


(2) 执行 “文件 ”>“ 检 查 页 ”>“ 检 查 链 接 " 命 令 , 这 时 “结果 ”面板 中 的 “链接 检查 器 ” 
选项 卡 被 打开 ,在 列表 中 出 现 断 掉 的 链接 文件 或 者 图 片 ,如 图 11-1 所 示 。 


链接 检查 器 
人 显示 (8) ; 断 掉 的 链接 辣 ( 链 接 文件 在 本 地 磁盘 没有 找到 ) 
断 掉 的 链接 
回国 /star signs/Genini, htnl /Tenplates/nobanl. dwt 
动态 02. bap 


鸭 /star signs/Genini.htnl 


吕 开 1 个 ， 1 个 HTW.。 总攻 67 个 链 振 65 个 正确 ，2 个 所 征 ，0 个 外 部 多半 | 


图 11-1 检查 当前 网 页 链接 结果 


(3) 在 “结果 ”面板 中 单 击 “ 检 查 链 接 ” 按 钮 也 ,选择 弹出 菜单 中 的 “检查 整个 当前 本 
地 站 点 的 链接 ”命令 ,在 “链接 检查 器 "列表 中 会 显示 整个 站 点 断 掉 的 链接 文件 ,如 图 11-2 
所 示 。 


ER 和 一 
加 天 (| 新 拉 匀 扩 国 (名 接 文件 在 本 地 磁盘 没有 找到 ) 

四 | 文件 

加 | 国 /Untitled-7,htnl /Library/1ogo. lbi 


加 /Untitled-8. htnl /Library/10go. 1bi 
多 /Untitled-8.html /Library/nusic, lbi 


加 /star signs/Aquarius, htnl /Teaplates/nobanl. dyt 
加 /star signs/Aquarius. htnl 动态 02. bap 
网 /star signs/Aries, htnl /Tenplates/nobanl, dwt 


多 /star signs/Aries, htnl 动态 02. bap 
国 /star signs/Cancer. htnl 动态 02. bap 
下 901 不 410 个 NTN 208 不 巴 六 文件 次 开 2709 不全 入 DH 个 | 


图 11-2 检查 整个 当前 本 地 站 点 的 链接 结果 


(4) 检查 完 后 ,可 以 直接 在 “链接 检查 器 "列表 中 修复 损坏 的 链接 以 及 图 片 路 径 , 或 者 
从 列表 中 将 文件 打开 ,然后 在 “属性 ”面板 中 修复 。 链 接 修 复 后 ,此 文件 就 会 从 “链接 检查 
器 ?列表 中 消失 。 


11.1.2 测试 兼容 性 


测试 兼容 性 主要 是 检查 文档 中 是 否 有 目标 浏览 器 所 不 支持 的 任何 标签 或 属性 , 当 有 
元 素 不 被 目标 浏览 器 所 支持 时 ,网 页 将 显示 不 正常 或 部 分 功能 不 能 实现 。 这 项 测试 从 
Dreamweaver MX 开始 就 显得 更 为 简单 , 它 能 将 测试 出 来 的 错误 或 者 可 能 出 现 的 错误 列 
出 一 个 报告 单 , 然 后 根据 该 报告 单 的 提示 进行 修改 和 处 理 ,解决 有 可 能 出 现 的 问题 ,以 免 
在 浏览 页 面 时 出 现 错误 。 

在 检查 过 程 中 ,提供 了 3 个 级 别 的 潜在 问题 的 信息 : 告知 性 信息 好 .警告 鱼 和 错误 
遇 ,它们 各 自 的 含义 如 下 所 述 。 

(1) 告知 性 信息 昂 : 表示 代码 在 特定 浏览 器 中 不 支持 ,但 没有 可 见 的 影响 。 

(2) 警告 刍 : 表示 某 段 代码 将 不 能 在 特定 浏览 器 中 正确 显示 ,但 不 会 导致 任何 严重 
的 显示 问题 。 
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(3) 错误 加 : 指示 代码 可 能 在 特定 浏览 器 中 导致 严重 的 可 见 的 问题 ,如 导致 页 面 的 
某 些 部 分 消失 ,所 以 出 现 错误 时 一 定 要 及 时 修复 错误 。 

测试 的 具体 操作 步骤 如 下 : 

(1) 打开 需要 测试 的 网 页 。 

(2) 执行 “文件 ”>“ 检 查 页 ”>“ 检 查 目 标 浏览 器 ”命令 ,在 “结果 ”面板 中 会 打开 “目标 
浏览 器 检查 ”选项 卡 ,在 该 列表 中 会 列 出 一 个 报告 单 ,该 报告 单 中 列 出 了 错误 项 和 有 可 能 
出 现 的 错误 项 ,如 图 11-3 所 示 为 检查 整个 当前 本 地 站 点 的 目标 浏览 器 显示 。 


3 。 onload 标签 的 TIC 属性 不 被 支持 。 [Netscape Navigator 7. 可 _ 
不 支持 scope 属性 ， 但 这 并 无 负面 影响 。 [Mi crosoft Internet. 


height 标签 的 TABLE 属性 不 被 支持 。 [Netscape Navigator 7.( 

height 标签 的 TABLE 属性 不 被 支持 。 [Netscape Navigator 7.( 

警告 : EMBED 标签 的 属性 和 值 根据 播 件 而 变化 。 请 检查 所 有 属性 和 . . 

不 支持 HTML 标签 的 xnlns 属性 ， 但 这 并 无 负面 影响 。 [Netsca. . 

onload ING 属性 不 被 支持 。 [Netscape Navigator 7.0] 图 
中 国 | 


图 11-3 检查 整个 当前 本 地 站 点 的 目标 浏览 器 结果 


(3) 根据 报告 单 中 的 提示 ,对 该 页 面 中 的 文档 进行 修改 ,直到 没有 错误 为 止 。 


11.2 申请 主页 空间 和 域名 


网 站 制作 并 测试 完毕 后 ,在 上 传 之 前 首先 应 该 在 Internet 上 申请 一 个 存放 网 页 的 空 
间 ,并 申请 一 个 指向 主页 空间 的 域名 ,这样 才能 通过 在 浏览 器 中 键入 域名 访问 到 制作 好 的 
网 页 。 

主页 空间 有 收费 和 免费 两 种 。 免 费 主页 空间 大 小 和 运行 的 条 件 会 受 一 定 限制 , 且 稳 
定性 也 欠 佳 ,一 般 的 个 人 网 站 可 选择 免费 空间 ,而 收费 空间 一 般 由 网 站 托管 机 构 提 供 , 其 
空间 大 小 及 支持 条 件 可 根据 用 户 的 需要 进行 选择 ,稳定 性 非常 好 ,数据 的 安全 性 也 较 高 ， 
企业 、 公 司 等 需要 较为 稳定 的 运行 环境 的 网 站 最 好 选择 收费 主页 空间 。 本 书 以 “5944. net 
我 就 试 试 ” 免 费 空间 ”提供 的 免费 主页 空间 为 例 , 进 行 主页 空间 的 申请 。 该 免费 主页 空间 
提供 1000MB 动态 免费 的 空间 ,全 面 支持 ASP、PHP.、. NET、CGI、SQL 数据 库 等 ,并 送 二 
级 域名 ,此 外 还 有 管理 控制 面板 ,支持 FTP 管理 功能 。 

具体 操作 步骤 如 下 : 

(1) 在 浏览 器 的 地 址 栏 中 输入 网 址 http://www. 5944. net, 并 按 Enter 键 , 即 可 进入 
“5944. net 我 就 试 试 ”免费 空间 ?网 站 的 主页 ,如 图 11-4 所 示 。 

(2) 单 击 网 站 页 面 上 的 “注册 登录 ?按钮 , 即 可 进入 “我 就 试 试 免 费 空间 ”网 站 的 登录 

页 面 。 在 登录 页 面 中 单 击 “ 注 册 ” 按 钮 , 即 可 进入 免费 空间 申请 表 的 注册 填写 页 面 ,如 

图 11-5 所 示 。 在 该 页 面 内 用 户 需要 根据 要 求 输入 相关 信息 。 
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5944.net 中 国 最 好 的 宝 则 站 
乌 欧 他 下 者 (Z， 收 若 ( 马 ， 工 具 C) 大吉) 


@re - 日 - 四国 的 | Pas 如 m 关 如 | 全 -总 回 -加 


二 下 加 图 htrp:yywrr 5944.net/ 


5944.net 


E03 


EE 全 环 最 好 的 动态 免费 宁 月 -3 


立刻 注册 人 @ Pp .NET. CO. SOL. 


首页 | 先 关 空间 | 帮助 中 心 | 中 国 YTP 空 间 | 美国 YIPS 间 | 5IDC. Co 


R 到 高 无 限 自 由 .16 L100 富生 


和 wanw 并 加 会 秀 空 科 68/ 300 人 好 年 


Bra) Sua Cr) Cu Ca Pa 
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Interpet 
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Orme - 日 - 国 国 的 | 及 并 次 0 类 加 | 个 -号 回 - 汉 


地 EE | 想 http://us. 5944. nat/ 国 思 区 到 
| 


5944*3ns 3 | gm | Wye | ar | Rr | sm cm 
我 就 斌 试 免 天 字 同 


用 户 各: 


诸 岗 
确 从容 玛 : 
ET 
且 的 证 导 
CE 
电子 九 件 : 
全 下 医 : 
准 甘 国 ' Ta 
入 用 多 区 : 回头 忆 和 风骨 8 江 到 
-注册 _ 
Suz] vas) [Svsd) Buas) Br Bua) [cc 
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攻克 计量 等 计 下 到 和 生僻 9 析 条 


完毕 | | 畏 Tnternet 


图 11-5 注册 页 面 


(3) 单 击 页 面 下 方 的 “注册 ”按钮 ,进行 注册 。 注 册 成 功 后 ,会 出 现 图 11-6 所 示 的 注 
册 成 功 提 示 对 话 框 。 单 击 “ 确 定 ” 按 钮 , 即 可 返回 网 站 页 面 ， 
给 出 免费 注册 结果 ,如 图 11-7 所 示 。 

应 记 下 这 些 信息 : 域名 (http://14208. 5w5w. info)、 
FTP 上 传 地 址 (204. 45. 67. 19 或 14208. 5w5w. info) .FTP [| 
上 传 账号 (14208)、 上 传 密码 (123456) 等 内 容 。 图 11-6 ”提示 对 话 框 


| 


人 江 志 ,请 辣 陆 进入 会 员 中 心 ! 
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ct 优质 美国 免 秃 空间 提供 育 - 本 crosoft Intcrnc -Xl 
文件 加 纺 固 但 枯 乔 (D 必 语 电工 具 CD 天助 外 [3 


四 上 旦 -上 日 -四 国名 | 月 由 去 号 E- 总 司 - 汤 


O944smns EF | SF | #0 | Esq | Emme | sc co | 


要 就 试 斌 人 
EE 
美国 VRR 空 税 无 腿 自 由 1G J100 久 和 


a Eo 总 大 十 :loooE re 本 
茂名 铸 定 -一 一 


乔 除 天 定 有 站 期 :| 2010-10-7 21:41:08 [ ”增加 使 用 时 间 
i 


寺 统 自动 分 本 的 域名 :| htts /114208 sse inte [ 数 认 ] 


安全 进出 未 自 寺 电 定 四 茂名 :| 吨 定 醋 名 


| 204.45.61.19 [可 癌 ] 于 ”ltzos.svevaare [ 复 鸯 ] 上传 文 作 


图 11-7 注册 结果 


(4) 如 果 要 更 改 域名 为 有 个 性 化 的 二 级 域名 ,可 以 单 击 图 11-7 中 的 “域名 绑 定 ”链接 
文字 , 调 出 图 11-8 所 示 的 页 面 。 


文件 (E)， 编辑 人 E) 收 卫 人 ) 工具 人 T) CT 
@@ 虞 -四 - 国 国 儿 | 忆 央 次 br 加 也- 瑟 习 -和 洛 


OE | http: /us. 5344. nery Me 


B944*mmns Er | em | HP | FEI | vr | Sr oo 
其 起 试 试 免费 空间 
去 总 7 
美国 V/R 空 疝 无 艰 自 由 1G 人 00 与 证 
管理 首页 和 鸡 是 定 绒 名 :14208. 5v5e. info， 不 可 更 改 
a TY mn, 
解除 九 定 : 字 属 、 政 主 、 ”十 衬 辣 杜 宇 “-” 负 全 
退 改 浴 科 一 一- 
反 志 意见 RewaE: [ |[ 交 定 ] 
安全 识 出 将 上 这 所 十 猎 名 巴 六 至 IP: 204. 45.67. 19 方 可 生效 ,， 
和、 
尽 于 看 洲 | | 
EE 
.eB 国 


Binet 


图 11-8 设置 个 性 化 二 级 域名 


(5) 在 “个 性 二 级 域名 ”文本 框 中 输入 有 个 性 化 的 二 
级 域名 (如 yoyo) ,再 单 击 “ 绑 定 ” 按 钮 ,弹出 绑 定 成 功 对 【EC CC 区 | 
话 框 , 如 图 11-9 所 示 。 人 个性 = 纺 二 各 yoyo. 5y5v info 召 定 成 功 

(6) 单 击 “ 确 定 ” 按 钮 并 返回 “管理 首页 ”, 此 时 ,在 
“您 自主 绑 定 的 域名 ?文本 框 内 显示 申请 的 二 级 域名 ,如 
图 11-10 所 示 。 


图 11-9 绑 定 成 功 对 话 框 
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你 使 用 的 空间 资源 情况 :| 总 大 小 : 1000 半点 状态 : 正常 
有 效 期 :| 2010-10-7 21:41:08 | ”增加 使 用 时 间 

【未 久保 项 .用户 需 每 月 登陆 此 丰 面 点 去 增加 空间 使 用 时 间 ) 

系统 自动 分 配 的 荆 名 :| atte: /1420s.s*s=_inse。 [默认 ] 


您 自主 乡 定 的 域名 :| 


tp://yoye. SSr_ info 


Tm 上 传 地 址 :| 204.a5.67.19 [入 币 ] 或 。 ldzos. sesv int 


FTP 上 舍 帐 号 :| 14208 [复制 ] 


FTP 上 传 密码 :| 12456 [复制 


常用 FTP 软 件 下 载 :| ashFP 下 载 加 [ems 9 区 o 


图 11-10 绑 定 后 注册 结果 


11.3 发 布 站 点 


在 Dreamweaver 8. 0 将 站 点 测试 好 后 , 即 可 进行 发 布 。 要 发 布 站 点 ,首先 需 设置 远程 
信息 ,然后 再 将 站 点 内 容 上 传 。 


11.3.1 配置 远程 信息 


具体 操作 步骤 如 下 

(1) 执行 “站 点 ”管理 站 点 ”命令 ,打开 “管理 站 点 "对话 框 ,在 左 侧 列表 中 选择 发 布 
的 站 点 ,然后 单 击 “ 编 辑 " 按 钮 ,如 图 11-11 所 示 。 

(2) 在 打开 的 “web 的 站 点 定义 为 "对话 框 中 选择 
“高 级 ”选项 卡 , 在 “分 类 ”列表 框 中 选择 “远程 信息 ” 选 
项 ,在 右 侧 的 “访问 ”下 拉 列 表 框 中 选择 FTP 选项 。 在 
“FTP 主机 ?文本 框 中 输入 申请 主页 空间 时 服务 商 提 
供给 用 户 的 FTP 地 址 ,在 “登录 ”文本 框 中 输入 用 户 申 
请 主页 空间 时 用 的 名 称 ,在 “密码 ”文本 框 中 输入 用 户 
的 密码 ,如 图 11-12 所 示 。 

(3) 单 击 “ 测 试 ”按钮 进行 测试 ,车 连接 成 功 系 统 
将 打开 如 图 11-13 所 示 的 提示 对 话 框 。 单 击 * 确 定 "按钮 关闭 提示 对 话 框 ,再 关闭 “web 的 
站 点 定义 为 ”对话 框 和 ”管理 站 点 ?对话 框 , 即 可 完成 远程 信息 的 设置 。 


管理 站 点 


图 11-11 “管理 站 点 ”对话 框 


11.3.2 上 传 站 点 


配置 好 远程 信息 后 ,在 Dreamweaver 8.0 的 “文件 ”面板 中 选择 要 上 传 的 站 点 的 根 文 
件 夹 或 部 分 文件 , 单 击 * 上 传 文件 ”按钮 会 ,Dreamweaver 8. 0 将 自动 连接 远程 服务 器 ,并 
将 选择 的 文件 或 文件 夹 上 传 到 指定 的 目录 中 。 
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weEb 的 站 点 定义 为 


远程 信息 


ww:Fr 国 
设计 间 FTP 主 机 (H) : |204. 45. 67. 19 

站 主 M 隶 @):[ | 
Contribute a 
密码 (B): er | 回 保存 GD) 


国 使 用 Fassive FTF GE) 
回 使 用 防火 墙 @) 肪 淡 墙 设置 (DD. . 。 
加 使用 安全 FTP SFTP) (BR) 


回 维护 同步 信息 四 
回 保存 时 自动 将 文件 上 传 到 服务 器 地) 
国 启 用 存 回 和 取出 (E) 


图 11-12 远程 信息 设置 对 话 框 


\ 生 Incronedia Dreanveaver 已 成 功 连接 到 您 的 Yeb 服务 器 


图 11-13 连接 成 功 对 话 框 


11.4 推广 网 站 


网 站 推广 的 目的 在 于 让 尽 可 能 多 的 潜在 用 户 了 解 并 访问 网 站 ,通过 网 站 获得 有 关 产 
品 和 服务 等 信息 ,为 最 终 形成 购买 决策 提供 支持 ,这 是 网 站 建 好 后 必须 要 做 的 一 项 重要 工 
作 。 网 站 推广 需要 借助 于 一 定 的 网 络 工具 和 资源 ,常用 的 网 站 推广 工具 和 资源 包括 搜索 
引擎 .网络 广告 友情 链接 .分 类 目录 .电子 邮件 .电子 书 、 免 费 软件 .传统 推广 渠道 等 。 本 
节 将 介绍 其 中 的 三 种 网 站 推广 方法 。 


11.4.1 登录 搜索 引擎 


在 网 站 建成 后 为 使 更 多 的 人 能 查询 并 访问 到 它 ,应 该 到 各 大 搜索 引擎 上 去 注册 ,并 尽 
可 能 提供 切实 有 效 的 关键 字 ; 搜 索引 擎 是 一 种 极为 方便 有 效 的 网 站 宣传 方式 ,这 将 会 给 网 
站 带 来 越 来 越 多 的 流量 ,是 目前 电子 商务 营销 的 重要 手段 。 


网 站 开发 与 设计 教程 


11.4.2 网 络 广告 


浏览 网 页 时 常见 到 广告 ,标题 广告 的 大 小 通常 为 468 像素 X 60 像素 ,或 为 120 像 
素 X60 像素 ,一 般 都 是 GIF 图 片 或 Flash 动画 ,如 图 11-14 所 示 。 当 访问 者 被 广告 标题 所 
吸引 并 点 击 时 , 即 被 连接 到 广告 发 布 者 的 网 站 ,所 以 广告 Banner 做 得 越 生动 ,被 点 击 的 概 
率 就 会 越 高 。 


ee— 


Ed 1 


图 11-14 标题 广告 


广告 交换 是 宣传 网 站 的 一 种 较为 有 效 的 方法 。 将 自己 网 站 的 主要 信息 如 广告 图 片 和 
站 地 址 等 提交 到 广告 交换 网 ,之 后 广告 交换 网 会 要 求 自 己 将 一 段 HTML 代码 加 入 到 
自己 的 网 站 中 ,这 样 自己 的 信息 就 会 出 现在 其 他 网 站 上 。 当 然 ,自己 的 网 站 也 会 出 现 别 的 
网 站 的 广告 条 。 所 以 一 定 要 将 自己 要 推广 的 信息 做 得 有 吸引 力 。 


11.4.3 友情 链接 


可 以 与 亲戚 朋友 们 的 站 点 交换 友情 链接 ,也 可 以 与 其 他 主页 互 建 友情 链接 ;当然 ,这 
些 网 站 最 好 是 点 击 率 比 较 高 的 。 友 情 链 接 包 括 文字 链接 和 图 片 链接 ,如 图 11-15 所 示 , 文 
字 链 接 一 般 就 是 公司 的 名 字 或 站 点 的 名 称 ; 图 片 链 接 包 括 Logo 链接 和 Banner 链接 ， 
Logo 和 Banner 的 制作 与 标题 广告 一 样 ,都 需要 仔细 考虑 怎样 吸引 浏览 者 的 鼠标 点 击 。 


加 


频道 /社区 : 天 天 财经 网 中 屋 浏 览 器 酉 陆 女 性 。 淘宝 店铺 部 家 。 热门 小 游戏 。 网 页 游戏 平台 。 免费 算命 网 。 ”火热 车 友 会 
上 网 导航 网 页 游戏 大 厅 稀奇 购物 。 情人 节 礼 物 网 。。 百 北 网 朝 娃 城 一 起 联盟 。 54377 小 游戏 
金山 打字 通 疾病 查询 健康 生活 
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图 11-15 友情 链接 


11.S 习 题 
一 、 选 择 题 
1. 检测 网 站 链接 以 及 兼容 性 等 方面 的 问题 ,一般 是 在 面板 中 进行 的 。 
A. 结果 B. 应 用 程序 C. 标签 检查 器 D. 文件 
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2. 通过 Dreamweaver 将 网 站 上 传 到 租赁 空间 是 在 环境 下 进行 的 。 


A. Dreamweaver 了 .下 TP 

C. CuteFtp D. FlashFXP 
3. 在 Dreamweaver 环境 下 ,上 传 网 站 是 在 面板 中 进行 的 。 

A. 结果 B. 应 用 程序 C. 标签 检查 器 D. 文件 
二 、 操 作 题 


利用 本 章 所 学 知识 ,将 自己 制作 的 网 站 进行 测试 和 发 布 。 
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动态 网 站 开发 基础 


随 着 Web 技术 的 迅猛 发 展 ,动态 网 站 技术 已 经 成 为 现今 Web 设计 的 热门 话题 。 动 
态 网 站 技术 有 很 多 优点 , 它 可 以 使 Web 页 面 更 加 美观 ,而 且 使 页 面 的 交互 性 更 强 , 能 实现 
静态 Web 页 面 所 不 能 实现 的 功能 。 本 章 将 简要 介绍 有 关 动 态 网 站 开发 的 相关 知识 和 
技术 。 

本 章 学 习 要 点 : 


。 动态 网 页 的 概念 
。 动态 网 页 技术 

。 服务 器 平台 的 搭建 
。 数据 库 基础 


12.1 动态 网 站 基础 


动态 网 站 是 指 通 过 数据 库 进 行 架构 的 网 站 ,而 不 是 指 具 有 动画 效果 的 网 站 。 动 态 网 
站 除了 要 设计 网 页 外 ,还 要 通过 数据 库 和 编写 程序 来 使 网 站 具有 更 多 自动 的 和 高 级 的 功 
能 。 动 态 网 站 的 内 容 更 新 和 维护 是 通过 基于 数据 库 技术 的 管理 系统 完成 的 , 它 将 网 站 从 
单纯 静态 页 面 制 作 延 伸 到 对 信息 资源 的 组 织 和 管理 。 本 节 将 介绍 动态 网 页 的 基础 知识 。 


12.1.1 什么 是 动态 网 页 


动态 网 页 是 相对 于 静态 网 页 而 言 的 ,所 谓 “ 静 态 ” 指 的 就 是 网 页 内 容 “ 固 定 不 变 ”, 当 用 
户 浏览 器 通过 Internet 向 Web 服务 器 请 求 提供 网 页 内 容 时 ,服务 器 仅仅 是 将 原 已 设计 好 
的 静态 HTML 文档 传送 给 用 户 浏 览 器 。 其 页 面 的 内 容 使 用 的 仅仅 是 标准 的 HTML 代 
码 ,最 多 再 加 上 一 些 动画 。 若 网 站 维护 者 要 更 新 网 页 的 内 容 , 就 必须 手动 地 来 更 新 其 所 有 
的 HTML 文档 ,工作 量 很 大 。 

那么 什么 是 动态 网 页 呢 ? 所 谓 ”* 动 态 ”, 与 网 页 上 的 各 种 动画 、 滚 动 字幕 等 视觉 上 的 
“动态 ”效果 没有 直接 关系 。 动 态 网 页 也 可 以 是 纯 文字 内 容 的 ,也 可 以 是 包含 各 种 动画 内 


容 的 ,这 些 只 是 网 页 具体 内 容 的 表现 形式 ,无 论 网 页 是 否 具 有 动态 效果 ,采用 动态 网 站 技 
术 生 成 的 网 页 都 称 为 动态 网 页 。 真 正 的 动态 网 页 体现 在 “交互 性 ”, 也 就 是 动态 网 页 能 根 
据 不 同 的 浏览 者 的 请 求 和 访问 时 间 显 示 不 同 的 内 容 。 

动态 网 页 的 文件 后 缀 为 . asp、. aspx、.jsp、. php、. cgi 等 ,其 内 容 一 般 是 由 服务 器 后 台 
程序 动态 生成 的 。 


12.1.2 动态 网 页 的 特点 


动态 网 页 的 原理 远 比 静 态 网 页 复杂 ,因为 网 站 服务 器 不 再 单纯 传递 网 页 给 客户 端 , 它 
同时 还 兼 具 执行 各 种 程序 的 能 力 。 同 时 , 它 还 负责 与 数据 库 进 行 数据 的 沟通 与 存 取 , 这 时 
的 服务 器 完全 可 以 把 它 看 做 是 一 个 “应 用 程序 服务 器 ”。 动 态 网 站 的 内 容 更 新 和 维护 是 通 
过 基于 数据 库 技术 的 管理 系统 完成 的 , 它 将 网 站 从 单纯 静态 页 面 制作 延伸 到 对 信息 资源 
的 组 织 和 管理 。 具 体 来 说 ,动态 网 页 主要 具有 以 下 特点 : 

(1) 网 页 会 根据 用 户 的 要 求 和 选择 而 动态 改变 或 响应 。 将 浏览 器 作为 客户 端 界 面 ， 
实现 数据 请 求 动态 回应 。 

(2) 更 新 网 页 不 需要 网 页 设计 者 本 人 进行 ,其 他 人 也 可 通过 后 台 管理 界面 添加 网 页 
内 容 , 实 现 页 面 自动 更 新 ,如 产品 更 新 .新 闻 更 新 的 后 台 录 和 等 ,从 而 大 大 节省 了 工作 量 。 

(3) 采用 动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ,如 用 户 注册 .用户 登录 、 在 线 调 
查 、 用 户 管理 等 。 

(4) 动态 网 页 实际 上 并 不 是 独立 存在 于 服务 器 上 的 网 页 文件 ,只 有 当 用 户 请 求 时 , 服 
务 器 才 返回 一 个 完整 的 网 页 。 

(5) 网 页 内 容 具 有 动态 性 , 当 不 同 的 时 间 、 不 同 的 人 访问 同一 网 址 时 会 产生 不 同 的 
页 面 。 


12.1.3 ”常见 动态 网 页 的 实现 技术 


实现 动态 网 页 的 技术 很 多 ,最 常见 的 动态 网 站 设计 技术 有 : 
1. CGI 技术 


CGI(Common gate Interface) 即 通用 网 关 接 口 。 它 是 一 段 程序 ,运行 在 服务 器 上 , 提 
供 同 客户 端 HTML 页 面 的 接口 。 通 俗 地 讲 ,CGI 就 像 是 一 座 桥 ,把 网 页 和 Web 服务 器 中 
的 执行 程序 连接 起 来 , 它 把 HTML 接收 的 指令 传递 给 服务 器 ,再 把 服务 器 执行 的 结果 返 
回 给 HTML 页 ;用 CGI 可 以 实现 处 理 表格 ,数据库 查询 发送 电 子 邮 件 等 许多 操作 ,CGI 
使 网 页 变 得 不 是 静态 的 ,而 是 交互 式 的 。 


2. ADO 技术 


ADO(ActiveX Data Object) 是 目前 在 Windows 环境 中 比较 流行 的 客户 端 数 据 库 编 
程 技术 。ADO 是 建立 在 OLE DB 底层 技术 之 上 的 高 级 编程 接口 ,因此 它 兼 具有 强大 的 
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数据 处 理 功能 和 极其 简单 、 易 用 的 编程 接口 ,因而 得 到 了 广泛 的 应 用 。 
3. ASP 技术 


ASP(Active Server Pages) 是 由 微软 公司 推出 的 一 个 Web 服务 器 端的 开发 环境 , 利 
用 它 可 以 产生 和 执行 动态 的 互动 的 、 高 性 能 的 Web 服务 应 用 程序 。 具 有 开发 简单 ,功能 
强大 等 优点 。ASP 自身 带 有 VBScript 和 JavaScript 两 种 脚本 引擎 。 


4. JSP 技术 


JSP(Java Server Pages) 是 由 Sun MicroSystems 公司 倡导 ,许多 公司 参与 一 起 建立 
的 一 种 动态 网 页 技术 标准 。 在 传统 的 网 页 HTML 文件 中 加 入 Java 程序 片段 和 JSP 标记 
就 构成 了 JSP 网 页 。 其 基本 特点 是 网 站 运行 于 Java 虚拟 机 上 ,具有 Java 程序 的 半 编 译 


5. PHP 技术 


PHP(Hypertext Preprocessor) 即 超 文 本 预 处 理 语言 。PHP 是 一 种 HTML 内 艇 式 
的 语言 ,PHP 与 微软 公司 的 ASP 颇 有 几 分 相似 ,都 是 一 种 在 服务 器 端 执 行 的 舱 入 
HTML 文档 的 脚本 语言 。 用 PHP 做 出 的 动态 页 面 与 其 他 的 编程 语言 相 比 ,PHP 是 将 程 
序 嵌入 到 HTML 文档 中 去 执行 ,执行 效率 比 完全 生成 HTML 标记 的 CGI 要 高 许多 ;与 
同样 是 嵌入 HTML 文档 的 脚本 语言 JavaScript 相 比 ,PHP 在 服务 器 端 执行 ,充分 利用 了 
服务 器 的 性 能 。 


12.2 服务 器 平台 的 搭建 


动态 网 页 是 不 能 直接 打开 运行 的 。 如 果 像 HTML 网 页 一 样 打开 动态 网 页 ,将 会 显 
示 网 页 的 源 代 码 或 是 对 网 页 源 代 码 进行 编辑 。 动 态 网 页 需要 在 服务 器 平台 上 运行 ,运行 
的 结果 以 HTML 的 方式 发 送 到 浏览 器 。 所 以 在 调试 和 运行 动态 网 页 时 ,需要 在 本 地 计 
算 机 上 安装 网 站 服务 器 软件 。 不 同 技术 开发 的 网 站 需要 不 同 的 网 站 服务 器 软件 来 支持 。 

在 Windows 操作 系统 中 ,一 般 都 是 利用 IIS 来 构建 动态 网 站 开发 平台 的 。IIS 
(Internet Information Server) 是 允许 在 公共 Internet 或 Intranet 上 发 布 信息 的 Web 服务 
器 ,IIS 通过 使 用 超 文本 传送 协议 (HTTP) 传 输 信息 ,同时 还 支持 FTP 和 gopher 服务 ,IIS 
能 够 很 好 地 支持 ASP, 是 动态 网 站 开发 的 理想 平台 ,下 面 以 Windows XP 环境 为 例 , 介 绍 
安装 和 配置 IIS 的 基本 方法 。 


12.2.1 安装 IIS 


具体 操作 步骤 如 下 : 
(1) 执行 “开始 ">" 设置 >“ 控制 面板 ”命令 ,打开 “控制 面板 ”窗口 。 
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(2) 双击 “添加 /删除 程序 "图标, 出现 “添加 或 删除 程序 ”对 话 框 ,如 图 12-1 所 示 。 


可 添加 或 副 除 程序 


当前 安装 的 程序 加 时 示 更 新 虽 振 序 方式 忆 ); [名 称 男 


ode Fh Fler 10 Netiver 


要 从 您 的 计算 机 册 除 该 程序 ， 单 击 “ 贡 除 ”。 
而 Mobe 了 ash Flayer 10 Fluein 
一 上 iu Definition hudio Driver Package - KI608111 


osoft Silverlight 
央 meoos Betul 
ET 
(WE Boal tek Nieh Definition hatie Driver 
一 Windows Instaler 3.1 mage03) 
性 Win 压 浓 文件 入 理 器 | 


图 12-1 “添加 或 删除 程序 ”对 话 框 


(3) 在 对 话 框 的 左 侧 , 单 击 * 添 加 /删除 Windows 组 件 ” 图 标 ,出 现 “Windows 组 件 向 
导 ” 对 话 框 ,如 图 12-2 所 示 。 选 中 “Internet 信息 服务 (IIS) "选项 ,然后 单 击 “ 下 一 步 ? 按 
钮 ,开始 安装 。 
Windows 组 件 向 导 


Tindors 组 件 
可 以 添加 或 删除 Windovs XP 的 组 件 。 


Se nent 


2952.4 MB 


二 上 = 步 @] 故 = 步 加 | [取消 
图 12-2 “Windows 组 件 向 导 ” 对 话 框 


(4) 完成 后 ,会 出 现 如 图 12-3 所 示 的 提示 框 ,直接 单 击 “ 完 成 ”按钮 即 可 。 


12.2.2 配置 IIS 


安装 完 IIS 后 ,所 有 的 设置 都 是 系统 默认 的 设置 ,这 时 并 不 能 直接 运行 网 站 ,还 需要 
对 IIS 进行 网 站 主 目录 、IP 地 址 和 执行 权限 等 设置 ,具体 操作 如 下 : 
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Windows 组 件 向 导 


完成 “Windows 组 件 向 导 ” 


您 已 成 功 地 完成 了 Windows 姐 件 向 导 。 


请 单 击 “ 完 成 ”来 关闭 此 向 导 。 


图 12-3 安装 完成 提示 对 话 杠 
(1) 进入 “控制 面板 ”程序 ,双击 “管理 工具 "图标, 出现“ 管理 工具 ”窗口 ,在 该 窗口 中 
双击 “Internet 信息 服务 ”图 标 , 出 现 “Internet 信息 服务 ”窗口 ,如 图 12-4 所 示 。 


文件 RE 查看 Q) 帮助 00 
+ 小 | 国 | 加 | 岛 | 居 |》 


日 - 曼 FOUNDERT-1F02CB (本 地 计算 机 ) | 者 FOUNDERT-1F02CB (本 地 计算 机 ) 。 是 ITS YS.1 
由 园 网 站 


由 图 FIP 站 点 
由 海 默认 SNTP 虚拟 服务 器 


ei) 力 | 


图 12-4 “Internet 信息 服务 ”窗口 


(2) 展开 “网 站 ”目录 ,再 用 鼠标 右 击 其 中 的 “默认 网 站 ”选项 ,从 出 现 的 快捷 菜单 中 选 
择 “ 属 性 ”命令 ,出 现 “默认 网 站 属性 ”对 话 框 ,如 图 12-5 所 示 。 

(3) 在 “网 站 ”选项 卡 中 ,在 “描述 "文本 框 中 定义 网 站 的 名 字 , 单 击 “IP 地 址 ” 栏 右 侧 的 
下 拉 箭 头 , 从 出 现 的 下 拉 菜 单 中 选择 IP 地 址 ,如 图 12-6 所 示 。 

(4) 单 击 “ 主 目录 "标签, 出现 “ 主 目录 ”选项 卡 。 在 该 选项 卡 的 “本 地 路 径 ” 文 本 框 中 
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Kz) 


自 定 义 错误 
ISAPI 第 选 器 主 上 孙 | 


六 网 站 标识 一 一 
描述 G) 
匡 地 址 加 ): 
TCF 端口 四): 


连接 
连接 超时 @) 
回 保持 ITF 连接 芭 ) 


一 回 自 用 日 志 记录 @) 
活动 日 志 格式 W) 
Y3C 扩展 日 志文 件 格式 


| 自 定义 错误 

网 站 ISAPI 第 选 器 “| 主 目录 | 文档 
网 站 标识 
描述 G): 我 的 网 站 

IP 地 址 区 ): [全 过 手 吨 ] 国 
连接 
连接 超时 0D) : 900| 秒 
保持 NTTF 连接 区) 


一 回 启用 日 志 记 录 包 ) 
活动 日 志 格 式 0D) : 
3C 扩展 日志 文件 格式 


[L 枉 jLL 融 _]Law ]jL 动 ] 


图 12-6 “网 站 ”选项 卡 


输入 存放 网 站 的 主 目录 ,或 单 击 后 面 的 “浏览 ”按钮 进行 选取 ,如 图 12-7 所 示 。 

(5) 对 网 站 中 的 各 种 执行 权限 进行 设置 。 各 选项 的 含义 如 表 12-1 所 示 。 

(6) 单 击 “ 文 档 ” 标 签 ,出 现 “ 文 档 ” 选 项 卡 , 如 图 12-8 所 示 。 在 该 选项 卡 中 , 单 击 “ 添 
加 ”按钮 ,出 现 “ 添 加 默认 文档 "对话 框 ,在 该 对 话 框 的 “默认 文档 名 ”文本 框 中 输入 index. 
asp, 如 图 12-9 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 默认 文档 的 添加 。 
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头 I 定义 后 二 
网 站 。 | IsAFI 第 选 器 主 目录 
连接 多 谋 源 时 的 内 容 来 源 
辐 此 计算 机 上 的 目录 @) 
日 另 一 各 计算 机 上 的 共享 8) 
人 加重 定向 到 LUD 


[ei Vinetpub rerood] 
加 妓 本 资源 访问 ) 辐 记录 访问 oO 
回 读 职 @) 
目 写 入 


索引 人 资源 GD) 


图 12-7 “ 主 目录 ”选项 卡 


表 12-1 IIS 的 执行 权限 选项 


执行 权限 选项 含 义 

脚本 资源 访问 选中 该 复 选 框 ,网 站 可 以 运行 动态 脚本 

读 取 设置 浏览 器 可 以 访问 网 站 中 的 文件 

写 人 用 户 对 服务 器 上 的 文件 夹 和 文件 有 写 和 权限 

目录 浏览 当 网 站 或 文件 夹 没 有 主页 时 ,可 以 浏览 网 站 中 的 文件 和 文件 夹 
记录 访问 网 站 上 的 程序 可 以 访问 IIS 的 运行 日 志 

索引 资源 网 站 可 以 访问 系统 的 索引 服务 

执行 权限 设置 网 站 可 不 可 以 运行 动态 网 站 程序 


IP 头 | 自 定义 错误 
ISAPI 第 选 器 ”| 主 目录 


高 用 默 这 文档 蕊 ) 


Tefault_ htm 


广 固 启用 文档 页 脚 @) 一 


(EET 


ETE 


默认 文档 名 @) 


index. asp 


[mma] 
图 12-8 “文档 ”选项 卡 图 12-9 添加 默认 文档 
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12.3 数据 库 基础 


数据 库 在 动态 网 站 建设 中 发 挥 着 重要 作用 , 它 在 网 站 建设 中 起 到 收集 信息 ,提供 搜索 
功能 ,方便 网 站 内 容 查 找 , 开 发 具有 特殊 功能 的 网 站 等 作用 。 在 学 习 动 态 网 站 开发 时 , 需 
要 理解 和 运用 数据 库 。 在 动态 网 站 中 常用 的 数据 库 是 Access 数据 库 、.SQL Server 数据 
库 .MySQL 数据 库 和 Oracle 数据 库 。 本 节 以 Access 数据 库 为 例 ,简单 介绍 一 下 数据 库 
的 基本 操作 。 


12.3.1 数据 库 的 基本 术语 


1. 数据 (Data) 


数据 是 数据 库 中 存储 的 基本 对 象 。 在 数据 库 技术 领域 ,描述 事物 的 符号 记录 就 称 为 
数据 。 描 述 事物 的 符号 可 以 是 数字 ,也 可 以 是 文字 、 图 形 ,图像 .声音 等 。 


2. 数据 库 (DataBase,DB) 


数据 库 ,形象 地 说 就 是 存放 数据 的 仓库 ,只 不 过 这 个 仓库 是 在 计算 机 存储 设备 上 ,而 
且 数 据 是 按 一 定 的 格式 存放 的 。 严 并 地 说 ,数据 库 是 指 长 期 存储 在 计算 机 内 的 、 有 组 织 
的 ,可 共享 的 数据 集合 。 数 据 库 中 的 数据 按 一 定 的 数据 模型 组 织 、 描 述 和 存储 ,具有 和 较 小 
的 元 余 度 、 较 高 的 数据 独立 性 和 易 扩展 性 ,并 可 以 为 各 种 用 户 所 共享 。 


3. 数据 库 管 理 系统 (DataBase Management System ,DBMS) 


数据 库 管 理 系统 是 位 于 用 户 与 操作 系统 之 间 的 一 层 数据 管理 软件 , 它 专门 负责 组 织 
和 存储 数据 .获取 和 维护 数据 , 它 的 主要 功能 包括 以 下 几 个 方面 。 

(1) 数据 定义 功能 : DBMS 提供 数据 定义 语言 (Data Definition Language,DLL) ,用 
户 通过 它 可 以 方便 地 对 数据 库 中 的 数据 对 象 进行 定义 。 

(2) 数据 操纵 功能 : DBMS 提供 数据 操纵 语言 (Data Manipulation Language,DML) ,用 
户 可 以 使 用 DML 操纵 数据 实现 对 数据 库 的 基本 操作 ,如 查询 插入、 删除 和 修改 等 。 

(3) 数据 库 的 运行 管理 : 数据 库 在 建立 、 运 用 和 维护 时 由 数据 库 管理 系统 统一 管理 、 
统一 控制 ,以 保证 数据 的 安全 性 ,完整 性 、 多 用 户 对 数据 的 并 发 使 用 及 发 生 故 障 后 的 系统 
恢复 。 

(4) 数据 库 的 建立 和 维护 功能 : 它 包括 数据 库 初 始 数据 的 输入 、 转 换 功 能 ,数据 库 的 
转 储 恢复 功能 ,数据 库 的 管理 重组 织 功能 和 人 性 能 监视 .分 析 功 能 等 。 这 些 功 能 通常 是 由 
一 些 实用 程序 完成 的 。 


4. 数据 库 系统 (DataBase System ,DBS) 
数据 库 系统 是 指 在 计算 机 系统 中 引入 数据 库 后 的 系统 ,一 般 由 数据 库 .数据库 管理 系 
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统 ( 及 其 开发 工具 ) .应 用 系统 数据库 管理 员 和 用 户 组 成 。 数 据 库 的 建立 .使 用 和 维护 等 
工作 只 靠 一 个 DBMS 远 远 不 够 ,还 要 有 专门 的 人 员 来 完成 ,这 些 人 被 称 为 数据 库 管 理 员 
(DataBase Administrator,DBA) 。 


12.3.2 创建 Access 数据 库 


Microsoft Access 是 一 种 简单 易 用 的 小 型 数据 库 系 统 。 利 用 它 能 够 快速 创建 具有 专 
业 特 色 的 数据 库 ,而 不 需要 高 深 的 理论 知识 和 编程 技巧 ,就 可 以 轻松 地 创建 和 管理 数据 
库 。 在 构建 动态 网 站 时 ,如 果 处 理 和 存储 的 信息 量 较 少 时 , Access 数据 库 便 是 最 佳 的 

在 使 用 Access 数据 库 以 前 需要 新 建 一 个 数据 库 。Access 是 一 种 文件 型 的 数据 库 ， 
新 建 数据 库 就 是 新 建 一 个 数据 库 文 件 , 扩 展 名 为 . mdb。 
创建 数据 库 的 具体 操作 步骤 如 下 : 
(1) 启动 Access 2003。 在 Access 2003 界面 中 执行 “文件 ”一 “新 建 ” 命 令 , 弹 出 如 
图 12-10 所 示 的 “新 建文 件 " 任 务 窗 格 。 

(2) 在 “新 建文 件 " 任 务 窗 格 中 ,选择 “ 空 数据 库 ” 选 项 并 单 击 它 , 弹 出 “文件 新 建 数 据 
库 ” 对 话 框 ,如 图 12-11 所 示 。 在 该 对 话 框 中 , “保存 位 置 ”处 选择 新 建 数据 库 文件 路 径 , 在 
“文件 名 ”文本 框 中 输入 所 要 创建 数据 库 的 名 称 。 


文件 新 建 数 据 库 


EE 国 @- 坊 |Q X 上 国 IO- 


己 ine 
同 网 站 


空 数据 库 
国 空当 据 访 问 页 
合用 现 有 数据 的 项 目 


贺 使 用 新 数据 的 项 目 
贺 根据 现 有 文件 . 


一 


搜索 


对 0ffice Omine 模板 
本 机 上 的 模板 


文件 名 加 :| 入 adb 
保存 类 型 CD) ft 0ffice Access 数据 库 (*. mdb) 


图 12-10 新 建文 件 图 12-11 “文件 新 建 数 据 库 ” 对 话 框 


(3) 单 击 “ 创 建 "按钮 ,弹出 如 图 12-12 所 示 的 “data: 数据 库 ” 窗 口 。 这 时 空 数据 库 就 
创建 好 了 。 


12.3.3 创建 表 


在 数据 库 中 , 表 是 存储 数据 的 容器 ,是 存储 一 类 相同 数据 类 型 的 集合 。 数 据 表 以 行列 
形式 存储 数据 项 ,这 点 与 电子 表格 相似 。 在 表 中 ,一 列 叫做 一 个 字段 ,存储 数据 的 一 类 信 
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2000 文件 烙 式 ) 


莘 打 开 用 设 +w 局 引 em | X | > 二 国 压 


| 
辆 使用 向 导 所 建 表 
加 ”通过 输入 数据 外 奸 表 


图 12-12 “data: 数据 库 ? 窗 口 


息 ; 一 行 中 ,所 有 数据 字段 的 集合 ,叫做 一 个 数据 记录 。 一 个 表 中 有 很 多 数据 记录 。 

(1) 字段 : 在 数据 表 中 ,每 一 列 用 来 存放 数据 的 一 个 相同 类 型 的 值 ,叫做 一 个 字段 。 
每 一 个 字段 都 有 一 种 数据 类 型 ,有 些 数据 类 型 需要 设置 字段 的 长 度 , 对 数据 的 格式 、 默 认 
值 也 需要 根据 实际 要 求 做 一 定 的 设置 。 

(2) 行 : 在 一 个 数据 表 中 ,每 一 条 数据 保存 为 一 行 记录 ,每 条 记录 有 多 个 字段 。 

(3) 主键 : 在 一 个 数据 表 中 ,需要 有 一 个 字段 用 来 唯一 标识 一 行 数据 ,这 就 是 表 的 主 
键 。 在 程序 中 ,需要 针对 数据 的 主键 进行 数据 的 查找 。 数 据 的 主键 那 一 列 所 有 行 的 值 是 
不 相同 的 ,这 样 才能 实现 对 表 中 的 数据 进行 唯一 性 标识 。 

在 Access 中 创建 表 的 具体 操作 步 又 如 下 : 

(1) 在 图 12-12 窗口 中 选中 “使 用 设计 器 创建 表 ” 选 项 ,打开 如 图 12-13 所 示 的 表 设 计 
窗口 。 


图 12-13 表 设 计 器 窗口 
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(2) 在 表 设 计 器 中 ,根据 需要 填写 各 个 字段 .字段 的 类 型 .字段 的 一 些 设置 。 还 可 以 


对 字段 的 用 途 作 一 定 的 说 明 备注 。 如 图 12-14 所 示 新 建 一 个 用 户 表 ,有 id、username、 
password age 4 个 字段 ,分 别 为 自动 编号 文本 文本 数字 数据 类 型 ,分 别 用 来 存储 用 户 
的 编号 .用 户 名 .口令 年龄 4 种 信息 。 


use 


图 12-14 设置 字段 


(3) 关闭 创建 的 表 时 , Access 会 提示 保存 表 。 在 “另存 为 "对 话 框 中 输入 表 的 名 称 
rtable。 


(4) 单 击 “ 确 定 ” 按 钮 ,Access 自动 弹出 询问 是 否定 义 主键 对 话 框 ,如 图 12-15 所 示 。 


加 


图 12-15 询问 是 否 创 建 主键 对 话 框 


(5) 在 建立 的 表 中 输入 数据 。 在 “data: 数据 库 ” 窗 口中 双击 打开 已 经 建立 的 表 


usertable, 打 开 如 图 12-16 所 示 的 “usertable: 表 ? 对 话 框 。 将 鼠标 光标 置 于 空白 行 中 ,对 


应 了 


F 列 字段 名 称 录 和 数据。 数据 录入 完毕 , 单 击 工具 栏 上 的 “保存 ?按钮 回 , 保 存 录入 的 


数据 ,如 图 12-17 所 示 。 


加 四 加 


5lyeye 801205 


a ET 
图 12-16 “usertable: 表 ” 对 话 框 图 12-17 输入 数据 
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说 明 : 自动 编号 是 Access 对 某 一 行 的 数据 自动 添加 的 一 个 编号 ,用 户 不 需要 填写 。 
12.3.4 连接 数据 库 


动态 网 页 最 重要 的 是 后 台数 据 库 。 更 新 网 页 信息 ,都 需要 从 后 台数 据 库 调用 。 对 于 
网 页 内 容 的 添加 、 修 改 、 删 除 等 操作 ,都 建立 在 前 台 和 后 台数 据 库 连接 的 基础 上 。 所 以 连 
接 数 据 库 在 动态 网 站 制作 过 程 中 占有 很 重要 的 位 置 。 


1. 创建 ODBC 数据 源 


ODBC(Open DataBase Connectivity, 开 放 的 数据 库 连 接 ) 是 微软 公司 开放 服务 结构 
中 有 关 数 据 库 的 一 个 组 成 部 分 。ODBC 提供 一 种 规范 的 数据 访问 形式 。 程 序 在 访问 数据 
时 ,并 不 直接 与 DBMS 交互 ,而 是 直接 通过 ODBC 提供 的 数据 访问 功能 实现 数据 访问 。 
ODBC 计算 机 上 的 数据 库 可 以 用 数据 源 的 形式 被 用 户 或 程序 访问 。 

创建 ODBC 数据 源 的 具体 操作 步骤 如 下 : 

(1) 执行 “开始 ”>“ 控 制 面板 ”>“ 管 理工 具 ” 一 “数据 源 (ODBC) "命令 ,弹出 “ODBC 
数据 源 管理 器 ”对 话 框 ,选择 “系统 DSN” 选 项 卡 ,如 图 12-18 所 示 。 


有 "0DBC 数据 源 管理 器 
用 户 DSN ee | 连接 池 | 关于 | 


二 (EE) 
Ev | [3] 


和 


取消 ”| 应 用 的 天助 
图 12-18 “系统 DSN” 选 项 卡 


(2) 在 “系统 DSN” 选 项 卡 中 单 击 “添加 ”按钮 ,弹出 “创建 新 数据 源 ” 对 话 框 ,如 
图 12-19 所 示 。 

(3) 在 “创建 新 数据 源 ” 对 话 框 中 选择 数据 源 的 驱动 程序 Microsoft Access Driver 
(x .mdb) ,然后 单 击 “ 完 成 "按钮 ,弹出 *ODBC Microsoft Access 安装 ”对 话 框 ,如 图 12-20 
所 示 。 在 “数据 源 名 ”文本 框 中 输入 要 连接 的 数据 源 名 ,此 处 为 data, 在 “数据 库 ” 项 中 单 击 
“选择 ”按钮 ,弹出 “选择 数据 库 ” 对 话 框 ,在 此 对 话 框 中 选择 前 面 所 创建 的 数据 库 , 如 
图 12-21 所 示 。 
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Driver do Microsoft Access (Ce.mdb) 

Driver do Microsoft dbase (#. dbf) 

Driver do Microsoft Excel 人 -xls) 

Driver do Microsoft Paradox (t.db ) 

Driver para o Microsoft Visual FoxPro 
ft nD 


图 12-19 “创建 新 数据 源 ”" 对 话 框 


系 环 数据 库 信 ) 


图 12-20 “ODBC Microsoft Access 安装 ”对 话 框 


数据 库 名 和 AN) 
aata mdb 


文件 类 型 ([); 
Access 数据 库 (tn 本 


图 12-21 “选择 数据 库 ” 对 话 框 


(4) 选择 好 数据 源 , 单 击 “ 确 定 ” 按 钮 ,返回 "ODBC Microsoft Access 安装 ”对 话 框 , 单 
击 “ 确 定 ” 按 钮 ,返回 "ODBC 数据 源 管理 器 ”对 话 框 ,这 时 会 在 “系统 DSN” 选 项 卡 中 看 到 
已 经 添加 的 系统 数据 源 ,如 图 12-22 所 示 。 添 加 数据 源 后 ,网 站 或 程序 就 可 以 通过 这 个 数 
据 源 实 现 对 数据 库 的 访问 。 
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图 12-22 新 添 系统 数据 源 


2. 创建 DSN 连接 


DSN(Data Source Name) , 即 数 据 源 名 称 。 它 表示 将 应 用 程序 和 某 个 数据 库 连 接 的 
信息 集合 。ODBC 数据 源 管理 器 使 用 该 信息 来 创建 指向 数据 库 的 连接 ,通常 DSN 可 以 保 
存在 文件 或 注册 表 中 。 实 际 上 创建 ODBC 连接 ,就 是 创建 同 DSN 的 连接 。 当 创建 了 指 
向 数据 库 的 ODBC 连接 后 , 同 该 数据 库 连 接 的 有 关 信 息 就 被 保存 在 DSN 中 ,而 在 程序 中 
如 果 要 操作 数据 库 , 也 必须 通过 DSN 来 进行 。 

下 面 我 们 具体 来 说 明 一 下 在 Dreamweaver 8.0 中 如 何 创 建 DSN 的 连接 。 

(1) 打开 Dreamweaver 8. 0 ,执行 “窗口 ”数据 库 ? 命 令 ,打开 数据库? 面板 。 

(2) 单 击 固 按 钮 ,从 弹出 菜单 中 选择 “数据 源 名 称 (DSN) ”命令 ,弹出 如 图 12-23 所 示 
的 “数据 源 名 称 (DSN) "对 话 框 。 在 该 对 话 框 中 的 “连接 名 称 " 文 本 框 中 输入 data, 在 “数据 
源 名 称 (DSN) "下拉 列 表 中 选择 data 数据 源 。 


数据 源 名 称 (DS) 


连接 名 称 : 
数据 源 名 称 DSN) : | data 
用 户 名 : 


密码 : 
Treanweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 了 SN 
加 使 用 本 地 DSN 


图 12-23 “数据 源 名 称 (DSN)” 对 话 框 


(3) 单 击 “ 测 试 ”按钮 ,如 果 成 功 , 会 弹出 如 图 12-24 所 示 的 成 功 创建 连接 脚本 提示 信 
息 , 单 击 “ 确 定 ” 按 钮 。 

(4) 在 “数据 源 名 称 (DNS)” 对 话 框 中 单 击 “ 确 定 ” 按 钮 , 回 到 “数据 库 ” 面 板 ,这 时 可 以 
看 到 创建 的 数据 源 ,如 图 12-25 所 示 。 


网 站 开发 与 设计 教程 


加 


组 
数据 库 邯 定 | 服务 器 行为 ”组件 
轩 口 ] Asp waseript 


图 12-24 连接 成 功 对 话 框 图 12-25 “数据 库 ” 面 板 


12.4 ASP 开发 基础 


ASP 是 一 种 非常 实用 的 动态 网 站 开发 技术 。 使 用 ASP 开发 的 网 页 运行 在 微软 公司 
的 TIS 平台 下 ,具有 很 好 的 性 能 与 数据 管理 能 力 。ASP 语法 简单 ,使 用 灵活 ,功能 强大 ,是 
一 种 易于 学 习 和 掌握 的 网 站 开发 技术 。 


12.4.1 ASP 简介 


ASP 全 称 Active Server Page, 即 动态 服务 器 网 页 ,其 功能 在 于 开发 运行 在 Windows 
服务 器 平台 上 的 动态 网 页 和 网 站 。ASP 程序 其 实 是 以 扩展 名 为 . asp 的 纯 文本 形式 存在 
于 Web 服务 器 上 的 ,所 以 可 以 用 任何 文本 编辑 器 编辑 或 打开 ,ASP 程序 中 可 以 包含 纯 文 
本 .HTML 标记 以 及 脚本 命令 。 

ASP 既 不 是 一 种 编程 语言 ,也 不 是 一 种 开发 工具 软件 ,同样 也 不 是 一 种 应 用 程序 , 它 
只 是 一 种 开发 动态 网 页 的 技术 ,提供 了 一 种 使 嵌入 在 HTML 页 面 中 的 脚本 程序 得 以 运 
行 的 环境 。 其 基本 特征 如 下 所 述 。 

(1) 无 需 编译 : ASP 脚本 岩 入 到 HTML 中 ,无 需 编译 或 链接 即 可 直接 解释 执行 。 

(2) 易于 生成 : 使 用 常规 文本 编辑 器 (如 Windows 下 的 记事 本 ) 即 可 进行 ASP 页 面 
的 设计 。 

(3) 独立 于 浏览 器 : 用 户 端 只 要 使 用 可 解释 常规 HTML 代码 的 浏览 器 , 即 可 浏览 
ASP 所 设计 的 主页 。ASP 脚本 是 在 站 点 服务 器 端 执行 的 ,用 户 端的 浏览 器 不 需要 支持 
它 。 因 此 ,不 需要 通过 从 服务 器 下 载 ASP 页 面 。 

(4) 面向 对 象 : 在 ASP 脚本 中 可 以 方便 地 引用 系统 组 件 和 ASP 的 内 置 组 件 , 还 能 通 
过 定制 ActiveX 服务 器 组 件 来 扩充 功能 。 

(5) 与 任何 ActiveX 脚本 语言 兼容 : 除了 可 使 用 VBScript 和 JavaScript 进行 设计 
外 ,还 能 通过 Plug-in 的 方式 ,使 用 由 第 三 方 所 提供 的 其 他 脚本 语言 。 

(6) 源 代码 不 会 外 漏 : ASP 脚本 在 服务 器 上 执行 , 传 到 用 户 浏览 器 的 只 是 ASP 执行 
结果 所 生成 的 常规 HTML 码 , 这 样 可 保证 编写 出 来 的 程序 代码 不 会 外 漏 。 

ASP 网 页 的 运行 可 以 用 以 下 步骤 来 表示 : 
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(1) 当 用 户 请 求 一 个 * . asp 网 页 时 ,该 请 求 通过 网 络 被 发 送 到 相应 的 Web 服务 器 。 

(2) Web 服务 器 响应 该 HTTP 请 求 , 并 根据 扩展 名 . asp 识别 出 ASP 文件 。 

(3) Web 服务 器 从 硬盘 或 内 存 中 获取 相应 的 ASP 文件 。 

(4) Web 服务 器 将 ASP 文件 发 送 到 脚本 引擎 (asp. dt) 文件 中 。 

(5) 脚本 引擎 (asp. dlD) 将 ASP 文件 从 头 到 尾 进 行 解释 处 理 , 并 根据 ASP 文件 中 的 
脚本 命令 生成 相应 的 HTML 网 页 。 

(6) HTML 网 页 被 浏览 器 解释 执行 并 显示 在 浏览 器 上 。 


12.4.2 ASP 基本 语法 


ASP 技术 并 无 自己 专用 的 语法 , 它 只 是 一 堆 对 象 的 组 件 , 但 是 支持 脚本 语言 
VBScript 和 JavaScript 的 语法 。 

ASP 程序 可 直接 嵌 在 HTML 标记 中 ,所 以 需要 使 用 不 同 的 符号 区 分 哪些 是 HTML 
标记 ,哪些 是 ASP 程序 代码 。 建 立 ASP 程序 只 需 将 ASP 程序 代码 放 在 二 %…% 志 符号 
间 。 如 果 网 页 的 程序 代码 中 含有 二 %… 3% 二 符号 ,支持 ASP 的 Web 服务 器 会 将 这 部 分 
程序 代码 转译 并 将 产生 的 HTML 网 页 传送 到 用 户 端 浏览 器 。 

在 第 4 章 已 经 介绍 过 JavaScript 的 基本 语法 ,在 这 里 就 不 再 具体 介绍 ASP 的 基本 语 
法 了 。 


12.4.3 ”ASP 内 置 对 象 


对 象 指 的 是 一 个 有 着 具体 功能 的 事物 ,这 个 事物 有 着 自己 的 属性 特征 ,有 一 定 的 功 
能 。ASP 有 Request、Response、Application、Session、Server 和 Cookies 六 大 内 置 对 象 。 
使 用 这 些 对 象 ,可 以 完成 各 种 网 页 交互 登录 验证 、 服 务 器 运行 等 程序 功能 。 


1。Request 对 象 


当 客户 端 用 户 向 服务 器 发 出 访问 页 面 请 求 或 者 提交 表单 时 ,服务 器 端 可 以 使 用 
Request 对 象 获 取 客 户 端 提 供 的 全 部 信息 。 这 些 信息 包括 客户 端 用 户 浏 览 器 的 相关 信 
息 ,用 户 请 求 的 页 面 信息 、 附 加 在 页 面 URL 后 的 参数 信息 ,在 表单 中 提交 的 所 有 数据 ,其 
至 用 户 提交 的 Cookies。 

1) Request 读 取 表 单 的 内 容 

当 一 个 表单 单 击 提交 以 后 ,需要 有 一 段 程序 读 取 表 单 中 的 各 个 表单 对 象 的 值 ,这 就 需 
要 使 用 Request 对 象 。 

例如 ,表单 中 有 一 个 字段 一 input name 一 "username" type 一 "text" id 一 "username" 二 , 需 
要 对 这 个 username 字段 进行 读 取 时 ,使 用 Request("username") 可 以 取得 用 户 提交 的 内 
容 。Request 会 返回 一 个 值 , 程 序 可 以 直接 调用 这 个 值 进行 处 理 。 

2) Request 读 取 超 链接 属性 内 容 

超 链接 的 后 面 可 以 有 一 些 属性 信息 。 例 如 ,一 个 超 链 接 “see. asp ? id 二 4”,“?” 后 面 
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的 是 链接 属性 内 容 , 也 需要 使 用 Request 对 象 进行 读 取 。 取 得 这 个 链接 属性 时 ,可 以 用 
Request("id") 的 方式 读 取 这 一 个 ID。 

3) Request 读 取 Cookies 

可 以 使 用 Request 来 读 取 一 个 Cookies 的 内 容 。 例 如 ,代码 “Request. cookies("x")”, 就 
是 读 取 一 个 名 称 为 x 的 Cookies 值 。 


2. Response 对 象 


Response 对 象 的 功能 与 Request 对 象 相反 ,该 对 象 是 用 来 访问 服务 器 端 所 创建 的 ， 
并 被 发 送 到 客户 端的 响应 信息 。 它 也 提供 了 一 系列 的 方法 用 来 创建 输出 , 例如 
Response. Write 方法 。 

1) Response. write 方法 

Response. write 是 向 浏览 器 输出 数据 。 输 出 的 数据 可 以 是 HTML 代码 ,也 可 以 是 
网 页 中 的 内 容 。 例 如 ,下 面 的 代码 是 向 网 页 中 输出 一 个 字符 串 和 一 个 变量 。 


<% 
Response. write (" Welome to My Site!") 
Response. write (now()) 

%> 


Response. write 也 可 以 简写 成 二 %% = % 放 的 形式 ,下 面 代码 中 的 输出 方式 和 上 面 
的 输出 是 等 价 的 。 

<$%=" Welome to My Site!"®> 

<$=now()%> 

2) Response. redirect 方法 

Response. redirect 方法 是 实现 页 面 的 跳 转 , 跳 转 的 页 面 可 以 是 本 网 站 的 其 他 网 页 ， 
也 可 以 是 Internet 上 的 其 他 外 部 网 站 。 例 如 ,下 面 程序 就 是 实现 页 面 的 跳 转 。 


< 多 
Response. redirect ("ok. asp") // 跳 转 到 当前 目录 的 网 页 ck.asp 
Response. redirect ("http://www.baidu.com") // 跳 转 到 百度 网 站 

%> 


3) Response. end 方法 
Response. end 方法 是 停止 响应 ,结束 之 后 的 程序 执行 。 当 一 段 程 序 需要 停止 时 ,就 
可 以 使 用 Response. end 方法 ,结束 程序 的 执行 和 输出 ,如 下 面 代码 : 


< 
Response. write ("Hello!") 
Response.end /终止 后 面 的 执行 
Response.write (Welcame to My Siter!") // 这 条 语句 不 执行 
$%> 
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3. Session 对 象 


Session 的 含义 是 会 话 ,表示 一 个 用 户 与 服务 器 的 一 次 交互 。 简 单 地 讲 ,Session 对 象 
就 是 一 个 保存 在 服务 器 上 的 用 户 变量 ,这 个 变量 记录 了 用 户 的 浏览 器 信息 ,只 有 这 一 个 用 
户 可 以 访问 自己 的 Session ,其 他 用 户 不 可 以 访问 ,这 就 可 以 实现 一 些 用 户 登 录 .安全 验证 
的 信息 。 

Session 变量 的 建立 和 访问 比较 简单 ,例如 ,可 以 用 下 面 的 语句 建立 一 个 Session 。 


< %Session ("Usemame")= "yoyo"®> 


建立 这 个 Session 的 用 户 可 以 访问 自己 的 Session 变量 。 例 如 ,下 面 代码 输出 上 面 代 
码 所 建立 的 Session 变量 。 


<%RFResponse. write (Session ("usemame"))%> 


一 个 Session 产生 以 后 会 在 服务 器 上 保存 一 段 时 间 ,一 般 IIS 默认 的 Session 时 间 是 
20 分 钟 。 如 果 这 个 用 户 在 20 分 钟 内 没有 与 服务 器 有 什么 交互 ,那么 这 个 Session 就 会 自 
动 取消 。 

Session 常用 于 网 站 后 台 安 全 验证 。 实 现 方法 是 在 用 户 登 录 成 功 以 后 ,产生 一 个 已 经 
登录 的 标识 Session。 在 登录 需要 进行 安全 验证 的 页 面 时 ,在 文件 的 最 开始 验证 这 个 
Session 是 否 有 效 。 例 如 ,下 面 的 代码 在 用 户 登 录 成 功 时 产生 一 个 Session。 

<%Session ("login")= "ok"®> 

在 需要 进行 安全 验证 的 页 面 时 ,可 以 用 下 面 的 语句 进行 验证 。 

< 多 

if session ("login")=" " then 

Response. redirect ("login.asp") 

end if 

%> 

这 样 , 当 用 户 在 没有 登录 的 情况 下 访问 这 个 页 面 时 ,网 页 会 自动 跳 转 到 登录 页 面 ,以 
达到 安全 验证 的 目的 。 


4. Cookies 对 象 


在 程序 开发 中 ,Cookies 是 一 段 从 服务 器 发 送 到 浏览 器 的 信息 。 浏 览 器 在 接收 这 个 
Cookies 以 后 ,会 保存 在 用 户 的 Cookies 文件 夹 下 。 当 用 户 再 一 次 访问 这 个 网 站 时 ,浏览 
器 会 自动 把 这 个 Cookies 发 回 ,服务 器 可 以 接收 和 处 理 这 个 Cookies 信息 。 在 ASP 程序 
中 ,用 Response. Cookies("") 来 向 用 户 发 送 一 个 Cookies, 用 Request. Cookies("") 方 法 
来 读 取 用 户 Cookies。 

比较 形象 地 讲 ,Cookies 可 以 认为 是 服务 器 对 用 户 计算 机 做 的 一 个 标记 ,服务 器 可 以 
读 取 和 管理 这 个 标记 。 根 据 这 个 特性 ,Cookies 就 可 以 被 用 作 和 用 户 访问 相关 的 数据 交 
互 操作 。 例 如 ,下 面 的 程序 就 是 一 个 用 Cookies 作用 户 访 问 计 数 的 例子 ,记录 一 个 计算 机 
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对 一 个 网 站 的 访问 次 数 。 


<% 
if Request.cookies("comnt")="" then 
Response. cookies ("oount")=1 ”// 如 果 没 有 cockies 则 发 送 一 个 值 为 1 的 cockies 
else 


Response. cookies ("count")= request. cookies ("count")+1 1/ 计数 加 1 
end if 
Response-write(" 你 已 经 访问 了 " & request. cookies ("count") & 吹 。") 
%> 
用 这 种 Cookies 的 计数 方法 ,可 以 方便 地 识别 单一 用 户 的 数据 ,方便 地 实现 对 单 用 户 
访问 计数 。 


S. Application 对 和 象 


Application 对 象 可 以 认为 是 一 个 所 有 用 户 都 可 以 访问 的 公用 变量 。 这 个 变量 创建 
以 后 ,一 直 保存 在 服务 器 上 ,所 有 访问 网 站 的 用 户 都 可 以 访问 。Application 可 以 实现 较 
小 数据 的 共享 与 交互 。 

所 有 的 用 户 都 可 以 访问 Application, 当 很 多 用 户 访 问 时 ,可 能 会 产生 数据 不 一 致 的 
情况 ,所 以 Application 在 使 用 时 要 进行 锁定 ,访问 结束 以 后 需要 解除 锁定 。 例 如 ,下 面 是 
一 段 Application 实现 的 计数 器 程序 。 


< 
if Application("cont")="" then 
PEPlication ()= 工 
else 
Application. Iock // 锁 定 NEplication 
Meplication()= Application ("oont")+ 1 1/ 计数 加 1 
Application.Unlock // 解 除 锁定 
end if 
Response.write(" 你 是 第 " & "Application ("oount") & "访问 者 由 
%> 


6. Server 对 象 


Server 对 象 提 供 了 服务 器 上 方法 和 属性 的 访问 。 它 在 服务 器 脚本 中 通过 创建 其 他 外 
部 组 件 对 象 ,为 ASP 页 提供 了 一 种 扩展 功能 的 方法 。 


12.5 习 题 


一 、 选 择 题 
1. 下 列 不 属于 动态 网 页 技术 的 是 
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A. JSP B. CGI 人 ASP D. HSP 


2. 下 列 特点 中 不 属于 ASP 的 是 5 
A. 支持 绝 大 部 分 平台 ,包括 Linux 系统 .Apache 服务 器 等 ,使 得 程序 可 以 跨 平台 
运行 


B. 可 以 便捷 地 使 用 ActiveX 组 件 来 执行 复杂 的 任务 
C. 嵌入 到 HTML 中 ,无 需 编译 或 链接 即 可 直接 解释 执行 
D. 在 服务 器 端 执行 的 ,无 需 客户 端的 浏览 器 支持 


3. 如 果 要 修改 IIS 的 TCP 端口 号 ,可 以 在 中 进行 设置 。 
A.“ 主 目录 ”选项 卡 B.“ 网 站 ”选项 卡 
C.“ 文 档 ” 选 项 卡 D.“HTTP 头 ” 选 项 卡 
4. 下 列 哪个 选项 描述 的 不 是 数据 库 管理 系统 的 功能 ? 
A. 数据 定义 功能 B. 数据 操纵 功能 
C. 数据 库 的 建立 和 维护 功能 D. 以 上 都 是 
5. 执行 完 如 下 语句 后 ,页面 上 显示 的 内 容 为 人 
<% 


Response. write ("A") 

Response. end 

Response. write ("B") 
%> 


A. A B. AB CG AC D. ABC 
6. 使 用 Response 对 象 的 方法 .可 以 使 页 面 重 定向 。 

A. Clear( ) B. Redirect( ) C. End( ) D. Flush( ) 
二 、 简 答题 


1. 解释 何 为 动态 网 页 ? 

2. 简 述 如 何 连 接 Access 数据 库 。 

3. 简 述 什么 是 Cookies 。 

4. 简要 说 明 ASP 与 HTML 的 关系 。 
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使 用 Dreamweaver 创建 动态 网 站 


Dreamweaver 8. 0 提供 了 强大 的 数据 访问 功能 ,可 以 在 进行 很 少 编 程 的 情况 下 开发 
出 功能 强大 的 动态 网 站 。 借 助 于 Dreamweaver 8.0, 可 以 自动 生成 各 种 ASP 代码 ,完成 
各 种 动态 网 站 的 功能 。 本 章 将 以 一 个 留言 板 网 站 为 例 , 详 细 讲 解 ASP 动态 网 站 的 开发 


本 章 学 习 要 点 : 


。 创建 动态 站 点 

。 记录 集 的 使 用 

。 服务 器 平台 的 搭建 
。 数据 库 基 础 


13.1 创建 动态 站 点 


13.1.1 建立 站 点 


在 第 5 章 介绍 了 在 Dreamweaver 8. 0 中 创建 静态 站 点 的 方法 ,本 节 将 学 习 如 何 建立 
包含 服务 器 端 脚本 的 动态 站 点 。 具 体操 作 步骤 如 下 : 

(1) 在 DD:\ 盘 中 建立 一 个 文件 夹 ,命名 为 web。 

(2) 执行 “站 点 ”>“ 新 建站 点 ”命令 ,弹出 站 点 定义 对 话 框 。 在 “高 级 ”选项 卡 中 选择 
“本 地 信息 ”选项 ,在 “站 点 名 称 ” 文 本 框 中 输入 站 点 名 称 为 “留言 板 ”, 在 “本 地 根 文 件 夹 ” 文 
本 框 中 输入 “*D:\web\”,“ 上 默认 图 像 文 件 夹 "文本 框 设置 为 D:\web\images\,“HTTP 地 
址 ”设置 为 http://localhost, 如 图 13-1 所 示 。 

(3) 选择 “测试 服务 器 ”选项 。 在 如 图 13-2 所 示 的 对 话 框 中 设置 “服务 器 模型 ”为 
ASP VBScript, 在 “访问 ”下拉 菜单 中 设 园 为 “本 地 /网 络 ”“ 测 试 服务 器 文件 ”设置 为 D:\ 
web\ ,“URL 前 级 ”设置 为 http://localhost/。 

(4) 单 击 “ 确 定 ”按钮 .完成 动态 站 点 的 建立 。 


默认 图 像 文件 亦 加 ): |D: \web\inages\ [= 


链接 相对 于 : 〇 文档 则 吉 点 彼 目 录 久 j 
20TP 地 址 0): [http://1ocalhost 


多 
区 分 大 小 写 的 链接 : 站 使 用 区 分 大 小 写 的 链接 检查 QD) 
缓存: 回 启用 缓存 E) 


Cm 
图 13-1 设置 本 地 信息 


服务 器 模型 员 ): [ASP VBSeript 国 
访问 内; | 本地/ 网络 。 国 
测 汉 服务 器 六 件 来: :wb 下 
丫 自动 刷新 测试 文件 列表 到 ) 


Contribute 


务 器 上 站 点 根 文件 


图 13-2 设置 测试 服务 器 


13.1.2 设置 HS 


建立 好 站 点 后 ,需要 设置 IIS 的 根 目录 和 主页 文件 。 这 样 才 可 以 使 IIS 访问 站 点 中 的 
文件 。 站 点 中 的 文件 只 有 在 IIS 中 才 可 以 作为 动态 网 页 运行 。 具 体 设置 步骤 如 下 : 
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(1) 进入 “控制 面板 ”程序 ,双击 “管理 工具 ”图 标 ,出 现 “ 管 理工 具 ” 窗 口 ,在 该 窗口 中 
双击 “Internet 信息 服务 ”图 标 ,出现 “Internet 信息 服务 ”窗口 ,如 图 13-3 所 示 。 


回回 四 


> Internet 信息 服务 
文件 中 ”操作 查看 QI) 帮助 

+ 小 | 国 | 隐 | 岛 田 | 晨 |》 让 1 
将 Internet 信息 服务 计算 机 
已 曼 民 全 各 里 27 (本 地 计算 机 ) 


由 - 海 默认 SMTP 虚拟 服务 器 


图 13-3 “Internet 信息 服务 ”窗口 
(2) 展开 “网 站 ”目录 ,再 用 鼠标 右 击 其 中 的 “默认 网 站 ”选项 ,从 出 现 的 快捷 菜单 中 选 
择 “ 属 性 "命令, 出现“ 默认 网 站 属性 ”对 话 框 ,选择 “ 主 目录 ”选项 卡 , 进 行 目 录 管 理 ,如 
图 13-4 所 示 。 单 击 “ 本 地 路 径 ” 文 本 框 后 面 的 “浏览 ”按钮 ,选择 网 站 目录 D:\web。 


[网 站 “| ISAPI 第 选 器 主 目录 [文档 | 目录 安全 性 [HTTP 头 ] 自 定义 错误 ] 
连接 到 资源 时 的 内 容 来 源 : 

回 此 计算 机 上 的 目录 @) 

加 另 一 台 计 算 机 上 的 共享 GE) 

〇 重 定向 到 Lu 


D:\web 


回 记录 访问 Q) 
回 素 引资 源 G) 


默认 应 用 程序 
爸 认 网 站 > 


纯 脚 本 
低 CTS 进程 ) 


图 13-4 设置 主 目录 


(3) 选择 “文档 "选项 卡 ,添加 网 站 的 默认 文档 。 单 击 “ 添 加 ”按钮 ,在 弹出 的 对 话 框 中 
输入 “index. asp”, 然 后 单 击 “ 确 定 ” 按 钮 ,如 图 13-5 所 示 。 
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网 站 _] TsAEI 第 选 器 ] 主 目录 ] 文档 。 | 目录 安全 性 ] ITP 头 [ 自 定义 错误 | 


例 启 用 默认 文档 CC) 


Default. htm 

[EI 
e 
E27 


BEEv 


图 13-5 添加 默认 文档 


13.1.3 测试 动态 网 页 


设置 好 本 地 站 点 和 IIS 以 后 ,可 以 新 建 一 个 ASP 动态 网 页 来 测试 本 地 站 点 和 IIS 是 
否 可 以 正常 工作 。 

(1) 在 Dreamweaver 8.0 中 新 建 一 个 网 页 。 执 行 “文件 ”一 “新 建 "命令 ,在 弹出 的 对 
话 框 中 新 建 一 个 ASP VBScript 网 页 。 

(2) 将 编辑 窗口 切换 到 “代码 ”视图 ,在 二 body 二 标签 下 面 输入 ASP 代码 “去 多 = 
now( ) %% 二 ”, 显 示 当 前 的 时 间 ,如 图 13-6 所 示 。 


web\index. asp (XHTNL)* 


“WLANGUAGE=" VBSCRIPT” 936 %> 

《IDOCTYPE htal PUBLIC“-//W3C//DTD XHTIL 1.0 
Transitional//EN” 

“http://ww. w3. org/TR/xhtnl1/DID/xhtnll-transitional. dtd”> 
《htal xnlns="http://www. w3. org/1999/xhtnl” 

head> 

meta http-equiv="Content-Type” content="text/html 
charset=gb2312”/> 

《title) 留 言 板 网 站 </title> 


FETTIEITE NFLEEDN 


图 13-6 输入 ASP 代码 


网 站 开发 与 设计 教程 


(3) 执行 "文件 ”保存 ”命令 ,将 网 页 文件 保存 在 D:\web 下 ,文件 名 为 index. asp。 
(4) 打开 浏览 器 ,在 浏览 器 的 地 址 栏 中 输入 “http://localhost/”, 打 开 这 个 网 页 。 这 
时 IIS 会 运行 站 点 中 的 这 个 网 页 。 网 页 的 运行 效果 如 图 13-7 所 示 。 


EE 回回 轿 
文件 中 编辑 E) 查看 YW) 收 总 9) 工具 CX) 帮助 00 


ra- ©- BDO Pr wen 加 | “ 


地 让 国策 http://1ocalhost/ 国 因 到 ti” 


现在 时 间 是 2010-8-11 23:55:24 


图 13-7 网 页 效果 


13.2 创建 数据 库 


在 动态 网 站 中 ,需要 设计 网 站 的 数据 库 。 合 理 的 数据 库 结构 ,可 以 简化 程序 的 编写 。 
13.2.1 数据 库 内 容 分 析 


在 建立 数据 库 之 前 ,需要 对 数据 库 的 需求 进行 分 析 , 首 先 需要 分 析 网 页 中 保存 的 数 
据 , 然 后 还 需要 考虑 数据 的 保存 方式 。 网 页 中 的 数据 需要 保存 在 几 个 表 中 ,每 个 表 的 内 容 
是 什么 ,每 个 表 有 几 个 字段 ,每 个 字段 的 数据 类 型 。 

对 于 本 例 ,数据 库 需要 保存 的 内 容 是 用 户 的 留言 。 用 户 的 留言 每 一 条 是 独立 保存 的 ， 
与 其 他 的 数据 没有 关系 。 所 以 在 本 例 的 数据 库 中 只 有 一 个 留言 的 保存 表 book ,这 个 表 用 
来 保存 留言 板 中 所 有 的 留言 信息 ,所 有 字段 如 表 13-1 所 示 。 


13.2.2 建立 Access 数据 库 


确定 了 数据 库 内 容 后 , 即 可 使 用 Access 建立 数据 库 。 数 据 库 的 建立 ,主要 是 设计 数 
据 库 中 的 表 。 
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表 13-1 表 book 中 的 相关 字段 


字段 名 数据 类 型 长 度 保存 内 容 
id 自动 编号 自动 编号 
username 文本 30 用 户 名 
sex 文本 2 性 别 
email 文本 60 电子 邮箱 
title 文本 250 留言 标题 
content 备注 留言 内 容 
time 日 期 /时 间 ( 默 认 值 为 Now( )) 留言 时 间 
hits 数字 (默认 值 为 0) 点 击 次 数 
reply 备注 管理 员 回 复 


(1) 启动 Access 2003。 在 Access 2003 界面 中 执行 “文件 ”>“ 新 建 " 命 令 ,弹出 “新 建 
文件 ”任务 窗 格 , 单 击 " 空 数据 库 ” 选 项 ,弹出 “文件 新 建 数 据 库 ” 对 话 框 ,在 该 对 话 框 中 ,“ 保 
存 位 置 ”处 选择 新 建 数 据 库 文件 路 径 D:\web, 在 “文件 名 ”文本 框 中 输入 所 要 创建 数据 库 
的 名 称 notebook。 单 击 “ 创 建 "按钮 ,弹出 如 图 13-8 所 示 的 “notebook: 数据 库 ” 窗 口 。 这 
时 空 数据 库 就 创建 好 了 。 

画 notebook : 数据 库 (Access 2000 文件 格式 ) 加 [SE 
区 打开 甩 设 + 局 | X | as 半 国 志 
[] 


园 使 用 向 导 创 建 表 
辆 “通过 输入 数据 外 娃 表 


淹 
体 
表 


各 可 
国 汪 
加 报 
得 页 
2 完 
党 模 


水 


图 13-8 “notebook: 数据 库 ” 窗 口 


(2) 设计 数据 库 中 的 表 。 双 击 “ 使 用 设计 器 创建 表 ”, 在 Access 数据 库 中 创建 一 个 数 
据 表 。 按 照 表 13-1 中 的 字段 名 与 数据 类 型 设置 数据 表 中 的 每 一 个 字段 与 字段 的 数据 类 
型 ,如 图 13-9 所 示 

(3) 设置 完成 后 ,关闭 数据 表 , 弹 出 “另存 为 ”提示 对 话 框 ,将 表 命 名 为 book。 单 击 
“确定 ”按钮 ,将 表 保 存在 数据 库 中 。 

(4) 添加 数据 。 双 击 打开 book 数据 表 ,按照 每 个 字段 的 实际 含义 在 数据 表 中 插入 一 
些 数据 ,如 图 13-10 所 示 。 插 入 时 ,需要 注意 字段 的 数据 类 型 与 有 效 性 。 


13.2.3 创建 数据 库 连 接 


Dreamweaver 8. 0 中 的 站 点 在 访问 数据 库 时 ,需要 先 建立 数据 库 的 连接 。Dreamweaver 
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图 13-9 设置 数据 表 字 段 


content 

1 李 明 J1iming8126. com | 我 爱 ASP | 我 爱 ASP Cbr> 110-8-12 0:43:58 
2| 王 红 Jwangh8163. com | 网 站 开发 | 网 站 开发 与 设计 < 10-6-12 0:44:19 
3 张 高 zhangliangatom | ASP |ASP 技 术 
4 张 小 | 女 |zhangxiao8126.o 动 态 网 页 网 页 上 

5 李 明 | ing126. com | 我 爱 网 站 开发 | 我 爱 网 站 开发 |1 
7 起 由 杰 lyanjiezhao8163. | 你 好 HELD Chr> | 
8 张 小 六 | zhangxiao8126.c ASP | ASP 开 发 动态 网 页 10-8-12 0:50 

9 起 巾 杰 | 文 Yanjiezhao8163.| 世博会 _ 一 起 去 看 世博 合 |10-8-12 0:51 


图 13-10 ”添加 数据 


8.0 中 的 “应 用 程序 ?面板 是 用 来 创建 数据 库 连 接 和 实现 数据 查询 的 工具 。 

(1) 创建 ODBC 数据 源 。 具 体 方法 可 参照 12.3.4 节 。 

(2) 在 Dreamweaver 8.0 中 执行 “窗口 ?一 数据库 ?命令 ,打开 * 应 用 程序 ?面板 ,如 
图 13-11(a) 所 示 。 


数据 库 堵 定 ”服务 器 行为 ”组 件 
周口 Asp vaseript 


若 要 在 该 页 面 上 使 用 动态 数据 : 
v 1。 为 党 文件 创建 站 点 。 日 全 囊 


v 。 2， 选择 一 种 立 挡 类 型 由 - 国 book 
v 3， 设置 站 点 的 测 迁 服 各 嚼 办 视图 


. 类 预存 过 程 
4 区 + 按钮 创建 


(a) 数据 库 连 接 界 面 (b) 数据 库 连 接 完成 后 
图 13-11 建立 数据 库 的 连接 
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(3) 创建 DSN 连接 。 具 体 方法 可 参照 12. 3.4 节 。 完 成 数据 库 的 连接 后 ,可 在 “数据 
库 ” 选 项 卡 中 看 到 所 连接 数据 中 的 表 或 视图 ,如 图 13-11(b) 所 示 。 


13.2.4 查看 连接 后 数据 表 内 容 


鼠标 右 击 图 13-11 中 的 表 book ,在 弹出 的 快捷 菜单 中 选择 “查看 数据 ”命令 ,可 以 在 
Dreamweaver 8. 0 中 查看 数据 库 中 这 个 表 的 数据 ,如 图 13-12 所 示 。 单 击 “ 确 定 ” 按 钮 可 
以 关闭 数据 的 显示 。 


2010-8-12. 
2010-8-12. 
2010-8-12. 
2010-8-12. 
2010-8-12. 
2010-8-12. 
2010-8-12. 
2010-8-12. 


(ies [RU 


图 13-12 在 Dreamweaver 8.0 中 查看 数据 表 内 容 


13.3 记录 集 的 使 用 


将 数据 库 用 做 动态 网 页 的 内 容 源 时 ,必须 首先 创建 一 个 要 在 其 中 存储 检索 数据 的 记 
录 集 。 记 录 集 在 存储 内 容 的 数据 库 和 生成 页 面 的 应 用 程序 服务 器 之 间 起 一 种 桥梁 作用 。 
记录 集 由 数据 库 查询 返回 的 数据 组 成 ,并 且 临 时 存储 在 应 用 程序 服务 器 的 内 存 中 ,以 便 进 
行 快速 数据 检索 。 当 服务 器 不 再 需要 记录 集 时 ,就 会 将 其 丢弃 。 

记录 集 本 身 是 从 指定 数据 库 中 检索 到 的 数据 的 集合 。 它 可 以 包括 完整 的 数据 库 表 ， 
也 可 以 包括 表 的 行 和 列 的 子 集 。 这 些 行 和 列 通过 在 记录 集中 定义 的 数据 库 查 询 进行 
检索 。 


13.3.1 创建 记录 集 


在 Dreamweaver 8. 0 中 建立 记录 集 对 象 操作 非常 方便 。 用 户 只 要 使 用 绑 定 功能 ,就 
可 以 为 网 页 添加 记录 集 对 象 。 具 体操 作 如 下 : 
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(1) 在 Dreamweaver 8.0 中 执行 “文件 ”一 新建” 命令 ,新 建 一 个 ASP VBScript 文 
件 。 保 存在 根 目录 D:\web 下 ,文件 名 为 al. asp。 

(2) 执行 “窗口 >“ 绑 定 ”命令 ,弹出 “应 用 程序 ”对 话 框 ,如 图 13-13 所 示 。 

(3) 单 击 轩 按钮 ,在 快捷 菜单 中 选择 “记录 集 ( 查 询 ) 选 项 ,弹出 如 图 13-14 所 示 的 
“记录 集 ” 对 话 框 。 


若 要 在 该 页 面 上 使 用 动态 数据 : 
Y “1. 请 为 该 文件 创建 一 个 站 点 
Y ”2， 选择 一 种 立 档 尖 型 
Y 3， 设置 站 点 的 测试 服务 嚼 ， 
4 号 (4) 
术 昌 . 按钮 并 选择 


图 13-13 “ 绑 定 ?选项 卡 图 13-14 “记录 集 ” 对 话 框 


(4) 在 “记录 集 ” 对 话 框 的 名称” 文本 框 中 输入 记录 集 的 名 称 rsl ,在 “连接 ”下 拉 菜 单 
中 选择 已 经 建立 的 数据 库 连 接 data, 在 “表格 ”下拉 菜 单 中 选择 数据 库 的 表 book, 在 “ 列 ” 
栏 中 选中 “全 部 ” 单 选 按 钮 。 

(5) 单 击 “ 测 试 ”按钮 ,如 果 记 录 集 创建 成 功 ,将 弹出 如 图 13-15 所 示 的 对 话 框 。 单 击 
“确定 ”按钮 ,返回 “ 绑 定 ”面板 ,向 导 将 自动 在 其 下 拉 列 表 中 添加 一 条 rsl 的 记录 集 选 项 ， 
如 图 13-16 所 示 。 


测试 SQL 指令 


外 对 对 浊 对 浊 对 3 


| title content time 
2010-. 
2010-. 


图 13-15 ”测试 创建 记录 集 图 13-16 插入 记录 集 
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13.3.2 动态 表格 显示 记录 集 


经 过 数据 查询 的 记录 集 , 需 要 使 用 表格 或 文本 将 查询 出 的 数据 显示 出 来 。 数 据 的 显 
示 是 将 记录 集中 的 结果 用 ASP 语句 输出 到 网 页 中 。 

(1) 打开 上 节 已 经 创建 记录 集 的 文件 D:\web\al. asp。 鼠 标 单 击 状态 栏 上 的 body 
标签 。 
(2) 执行 “插入 ”一 “应 用 程序 对 象 *>>“ 动 态 数 据 ”> “动态 表格 ”命令 ,插入 一 个 动 
态 表格 。“ 动 态 表格 "对话 框 如 图 13-17 所 示 。 在 “记录 集 ” 下 拉 菜 单 中 选择 已 经 创建 的 
记录 集 rsl ,在 “显示 ?文本 框 输入 5, 设 置 每 页 显示 5 条 记录 。 单 击 “ 确 定 ” 按 钮 完成 
设置 。 


图 13-17 “动态 表格 ”对话 框 
(3) 查看 “设计 ”视图 ,可 以 看 到 设计 视图 中 新 建 了 一 个 表格 。 表 格 中 有 自动 生成 的 


动态 文本 数据 ,如 图 13-18 所 示 。 动 态 表 格 自动 生成 了 记录 集 输 出 和 表格 输出 的 代码 。 
数据 集 在 显示 时 ,已 经 按照 设置 的 每 页 显示 条 目 进行 分 页 。 


iD:\web\al. asp (XHTHL)# 
dy,, ub 


HR 


ee Ea lie rr ey 
{rsl.id] [{rsi.usernane} [{rsl. sex} |{rsi. email} [{rsl.title} |{rsi. content} [{rsl, time} |{rsi.hits} |[{rsl, reply} 


% vj Tx 244v 7K/jI1 秒 


图 13-18 自动 生成 的 动态 表格 


(4) 编辑 表格 中 的 文本 内 容 。 对 自动 生成 的 表格 文本 ,需要 编辑 成 对 用 户 有 含义 的 
提示 ,如 图 13-19 所 示 ,在 “代码 ?视图 中 将 字段 名 相同 的 提示 更 改 成 相关 的 文字 提示 。 

(5) 保存 网 页 , 按 F12 键 预 览 网页。 浏览 器 会 打开 网 页 http://localhost/al. asp。 网 
页 的 显示 效果 如 图 13-20 所 示 。 
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而 D:\web\al.asp (XHTHTL)# 


人 lle ((Repeat1__mmRows 《> 0) AND (NOT rsl.EOF)) %> 


要 显示 记录 集 - Jicrosoft Internet Explorer 
文件 (E) 编辑 (B) 查看 (z) 收 启 ( 扩 工具 CT) 帮助 (Hi) 
@ 晴 -加 - 国 国 从 | 忆 姑 天 加 | 入 "各国 - 泥 


地 加 | 国 http://1ocalhost/al.asp 


也 本 用 户 名 性别 申 子 闻 件 有 慰 题 内 容 敬 加 时 间 庚 看 次 数 回复 
庚 明 | 男 liming8126.com ”我 要 ASP ”| 我 爱 ASP [2010-8-12 0:43:56 |1 
| 匡 红 [区 wangh8163.com 网 站 开发 。 “网 站 开发 与 设计 。 “|2010-8-12 0:44:19|3 
研 充 田 ett comlsp [ASP 扩 术 加 


图 13-20 动态 表格 输出 的 记录 和 集 


13.3.3 动态 文本 显示 记录 集 


动态 表格 可 以 把 一 个 记录 集中 的 内 容 全 部 显示 出 来 。 如 果 需 要 显示 某 一 条 具体 的 数 
据 , 则 需要 使 用 动态 文本 ,在 网 页 中 显示 记录 集中 的 数据 。 

(1) 新 建 一 个 ASP VBScript 文件 ,保存 在 D:\web 下 ,文件 名 为 a2. asp。 

(2) 创建 记录 集 。 具 体 方法 可 参照 13. 3. 1 节 。 

(3) 设置 数据 筛选 。 在 “记录 集 ” 对 话 框 的 “筛选 "下 拉 菜 单 中 选择 id 选项 ,将 数据 表 
中 的 id 字段 作为 数据 查询 的 条 件 ,数字 关系 中 选择 “二 ”选项 ,条 件 下 拉 菜 单 中 选择 “URL 
参数 ”选项 , URL 参数 的 字段 为 id, 如 图 13-21 所 示 。 单 击 “ 确 定 ” 按 钮 完成 记录 集 的 
插入 。 

(4) 在 Dreamweaver 8. 0 中 执行 “插入 ”一 “表格 ”命令 ,插入 一 个 5 行 2 列 、 宽 为 300 
像素 的 表格 。 并 在 表格 的 第 1 列 输入 提示 文本 ,如 图 13-22 所 示 。 

(5) 将 鼠标 置 于 “编号 ”右边 的 单元 格 中 ,执行 “插入 ”一 “应 用 程序 对 象 *>“ 动 态 数 
据 *”>“ 动 态 文 本 ”命令 ,在 单元 格 中 插入 一 个 动态 文本 。 在 记录 集 rs2 中 选择 需要 显示 的 
字段 id, 如 图 13-23 所 示 。 
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图 13-21 设置 记录 集 


臣 D:NwebNa2. asp (XHTHTL)# 


usernane 
sex 
enail 
title 
content 
time 
hits 
reply 


[第 一 个 记录 索引 国 


| = (rs2. Fields. Item ("id"). Value)’| 


图 13-23 设置 动态 文本 


(6) 用 同样 的 方法 在 下 面 的 单元 格 中 插入 其 他 需要 的 动态 文本 字段 。 插 入 动态 文本 
的 表格 如 图 13-24 所 示 。 
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(7) 保存 网 页 ,在 浏览 器 地 址 栏 中 输入 “http://localhost/a2. asp?id 一 3”, 网 页 会 列 
表 显 示 数 据 表 中 的 一 条 数据 , 即 id 为 3 时 所 对 应 的 数据 内 容 , 效 果 如 图 13-25 所 示 。 


包 查 看 一 条 记录 - 下 crosoft Internet Exzpl... 记 问 区 
文件 (E) 编辑 人 @) 查看 (Y) 收 襄 4) 工具 (TD) 帮助 (” 慷 


@ 碟 -日 - 国 国 的 | 记 弄 闪 嫩 x @| ” 


地 址 四) 


六 D:\web\a2. asp (XHTHTL)# 


{rs2. id} 
{rs2.username} 


{rs2. sex} 
{rs2. title} 
{rs2. content} 


J A how vw as eR/ 
图 13-24 插入 动态 文本 表格 图 13-25 显示 一 条 记录 


13.3.4 插入 记录 集 导航 条 


如 果 记 录 集 中 的 数据 一 页 无 法 显示 , 则 需要 添加 分 页 链接 。 在 ASP 程序 中 ,分 页 显 
示 是 一 个 十 分 复杂 的 过 程 和 算法 。Dreamweaver 8.0 提供 了 分 页 导航 条 工具 ,可 以 方便 
地 实现 数据 的 分 页 显示 和 翻 页 链接 。 

(1) 打开 前 面 建立 的 al. asp 文件 ,将 鼠标 定位 在 动态 表格 之 后 。 

(2) 执行 “插入 ”应 用 程序 对 象 "记录 集 分 页 ”> 记录 集 导航 条 ”命令 ,弹出 “ 记 
录 集 导航 条 ”对 话 框 ,如 图 13-26 所 示 ,设置 完成 单 击 * 确 定 "按钮 , 即 可 在 动态 表格 之 后 搬 
入 一 个 记录 集 导航 条 ,如 图 13-27 所 示 。 


DD:\web\al. asp (XHTHTL)# 
1 00 


EE 
J, 


图 13-27 插入 记录 集 导航 条 
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(3) 编辑 分 页 链接 的 文本 。 可 以 在 “代码 ”视图 中 找到 记录 集 导航 条 的 代码 。 在 代码 
中 将 链接 文本 更 改 为 所 需要 的 文本 。 

(4) 保存 网 页 , 按 F12 键 预览 ,效果 如 图 13-28 所 示 。 单 击 记录 集 导航 条 的 分 页 链 
接 , 可 以 实现 显示 数据 的 翻 页 。 


外 显示 记录 集 - icrosoft Internet Explorer 
文件 他) 编辑 (E) 查看 (Y) 收藏 个 ) 工具 (I) 帮助 8) 


Oma. © -四 四 OG Pen 家 epx @| 人 " 怠 加 -总 


直达 网 | 局 http://1ocalhost/al,asp?offset=5 


蝙 号 用 户 名 性 别 | 电子 邮件 用 题 ”内容 县 加 时 间 查看 次 数 回 复 
矿 ”起 息 杰 区 ”lvanjiezhao8163. com| 你 好 IHELLO |2010-8-12 0:49:34 [2 
8 研 小 [区 lzhangxiao8126.com [ASP [ASP 开发 动态 网 页 |2010-8-12 0:50:28 |8 
|8 “小 艳 杰 放 “yanjiezhao8153, com 世博 会 | 一 起 去 看 世博 会 “|2010-8-12 0:51:10 |10 
[fo 三 亮 | 勇 “|zhangliangetom com| 上 海 | 上 海 世博 会 欢迎 你 |2010-8-12 10:58:11 


丘 “两 政 “| 勇 yangzheng8sina. com 成 爱 ASP 我 要 努力 学 习 ASP |2010-8-12 10:58:21 


第 一 页 前 一 页 下 一 页 。 最 后 一 页 


Sat | 
图 13-28 网 页 中 的 记录 集 导 航 条 


13.4 实例 : 制作 留言 板 


留言 板 的 基本 功能 有 用 户 留 言 填写 .留言 保存 .留言 列表 、 留 言 详细 信息 查看 等 内 容 , 需 
要 用 ASP 程序 对 数据 库 进行 读 写实 现 这 些 功 能 。 程 序 中 数据 库 的 读 写 是 这 些 功 能 实现 的 
关键 部 分 。 下 面 将 具体 实现 留言 板 的 功能 ,注意 ,本 节 中 的 所 有 操作 ,必须 在 站 点 下 完成 。 


13.4.1 制作 添加 留言 网 页 write. asp 


留言 板 需 要 实现 留言 添加 功能 。 留 言 添加 功能 是 通过 表单 提交 和 数据 保存 两 个 步 又 
来 实现 的 。 用 户 在 留言 板 表 单 上 填写 自己 的 留言 以 后 , 单 击 “ 提 交 ” 按 钮 ,实现 留言 数据 的 
提交 与 保存 。Dreamweaver 8.0 提供 了 表单 自动 生成 和 数据 自动 保存 的 功能 。 在 不 需要 
编写 多 少 代 码 的 情况 下 可 以 完成 留言 功能 的 设计 。 

(1) 在 Dreamweaver 8.0 中 执行 “文件 ”一 新建 命令, 新建 一 个 ASP VBScript 文 
件 。 保 存在 根 目录 D:\web 下 ,文件 名 为 write. asp。 

(2) 在 Dreamweaver 8.0 中 选择 “插入 ”一 “应 用 程序 对 象 * 一 “插入 记录 ”一 “插入 记 
录 表 单 向 导 ” 命 令 , 弹 出 “插入 记录 表单 ”对 话 框 。 

(3) 在 “插入 记录 表单 "对话 框 的 “连接 "下拉 菜 单 中 选择 站 点 的 数据 库 连 接 data; 在 
“插入 到 表格 ”下 拉 菜 单 中 选择 数据 表 book; 在 “插入 后 , 转 到 ”文本 框 中 输入 完成 数据 插 
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和 人 以 后 转向 的 网 页 ,这 里 设置 为 “msg. asp?info 王 留言 添加 成 功 .”(msg. asp 网 页 将 在 后 
面 介绍 制作 方法 )。 在 “表单 字段 "列表 中 ,选择 不 需要 输入 信息 的 id,time、hits .reply 字 
段 , 单 击 [=] 按 钮 删除 这 些 字段 。 在 “表单 字段 ”列表 中 ,选择 一 个 字段 ,在 “标签 "文本 框 中 
输入 需要 的 标签 ,如 图 13-29 所 示 。 


避 aata 


|book 
搬入 后 ， 转 到 : [nsz asp?info= 留 言 添 加 成 功 . 


表单 字段: 十 [二 ] 


文本 字段 
文本 字段 


图 13-29 “插入 记录 表单 对话 框 


(4) 单 击 “ 确 定 ” 按 钮 完成 插入 表单 的 设置 。 在 Dreamweaver 8.0 的 “设计 ”视图 中 会 
添加 如 图 13-30 所 示 的 表单 。 


DD:\web\write. asp (XHTHL)# (= JIOIIX) 
lo 


图 13-30 生成 表单 


(5) 表单 中 的 所 有 字段 都 是 文本 框 。 而 性 别 一 栏 中 的 数据 ,需要 填写 有 效 的 值 ,可 以 
把 “性 别 ” 文 本 框 更 换 成 单 选 按钮 组 。 选 择 * 性 别 文 本 框 , 按 Delete 键 删除 。 将 鼠标 定位 
在 “性 别 ” 后 的 单元 格 中 ,执行 “插入 ”一 “表单 >“ 单 选 按钮 组 ”, 弹 出 “ 单 选 按 钮 组 ”对 话 
框 ,添加 “ 男 *"“ 女 ”标签 ,如 图 13-31 所 示 。 单 击 “ 确 定 ” 按 钮 ,插入 单 选 按 钮 组 ,效果 如 
图 13-32 所 示 。 

(6) 选中 “内 容 ” 文 本 框 ,在 “属性 ”面板 中 将 “类 型 "修改 为 多 行 。 

(7) 保存 网 页 , 按 F12 键 预览 网 页 ,网 页 显示 效果 如 图 13-33 所 示 。 
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布局 ， 使 用 : @ 换行 符 ( qhr》 标签 ) 
口 表格 


图 13-31 “ 单 选 按钮 组 ”对 话 框 


要 留言 板 - 了 Hi crosoft Internet Explorcr 
文件 人 编辑 全 宣 看 外 收藏 () 工具 CD 帮助” 区 


Ba- © -BO Pun wens © 


WD:\web\write. asp (XHTHL)# 


图 13-32 添加 单 选 按钮 组 图 13-33 添加 留言 网 页 


13.4.2 制作 信息 提示 网 页 msg. asp 


在 留言 保存 成 功 以 后 ,会 自动 跳 转 到 一 个 信息 提示 网 页 。 这 个 网 页 用 来 显示 URL 
传递 过 来 的 信息 。 

(1) 在 Dreamweaver 8.0 中 执行 “文件 ”一 “新 建 " 命 令 , 新 建 一 个 ASP VBScript 文 
件 。 保 存在 根 目 录 D:\web 下 ,文件 名 为 msg. asp。 

(2) 在 Dreamweaver 8.0 的 “标题 "文本 框 中 输入 网 页 标题 “信息 提示 网 页 ”。 

(3) 将 编辑 窗口 切换 到 “代码 ”视图 ,在 二 body 二 标签 后 输入 代码 二 % = request 
("info") % 志 ,用 以 显示 URL 传递 的 提示 信息 ,如 图 13-34 所 示 。 

(4) 在 “设计 ”视图 中 选中 生成 的 ASP 代码 符号 强 ,在 “属性 ?面板 中 单 击 “ 居 中 对 齐 ” 
按钮 重 ,设置 这 一 动态 文本 居中 对 齐 显 示 。 

(5) 保存 文件 。 当 在 write. asp 页 面 中 输入 留言 信息 后 , 单 击 “ 提 交 ” 按 钮 ,页 面 将 自 
动 跳 转 到 msg. asp 文件 ,效果 如 图 13-35 所 示 。 

说 明 : 当 提 交 成 功 后 ,用 户 留 言 将 通过 ASP 程序 自动 保存 在 数据 库 中 ,可 以 打开 数 
据 表 book 进行 查看 ,如 图 13-36 所 示 , 数 据 表 book 中 增加 了 1 条 记录 。 
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$$ D:\web\msg. asp (XHTHTL)# 四 
“%@L ANGUAGE=" YBSCRIPT™ CODEPAGE: 和 

《IDOCTYPE htnl PUBLIC “-//W3C//DID XHTIL 1.0 本 

Transitional//EN” 

“http://www. w3. org/TR/xhtnl1/DID/xhtmll-transitional. dtd” 

> 


<htnl xmlns="http://www. w3. org/1999/xhtnl”> 

<head> 

<meta http-equiv=“Content-Type” content="text/html 
charset=gb2312” /> 

《title> 信 息 提示 网 页 C/title> 


马 
车 
区 
党 
婉 
{ 


图 13-34 添加 代码 


号 留言 板 - Microsoft Internet Explorer 同 回 加 | 示 网 页 - Wicrosoft Internet Expl... [= |©|(X) 
文件 (E) 编辑 (E) 查看 (Y) 收藏 他) 工具 (T) 帮助 (” 局 文件 (E) 编辑 (E) 查看 (2) 收藏 ) 工具 (TD) 帮助 (” 局 
Ga . 日 .回国 的 | Pax 闪电 加 | @rs. ©- 回回 的 Dan 二 Wh @| 
她 本 加 | 倒 http://localhost/write.asp  ” 国 | 回 转 到 时 全 http://1ocalhost/nsg. asp?info=f 国 | 回转 到 上 证 四 
用 户 名 匡 林 ] 留言 添加 成 功 。 
性 别 品 男 @ 女 
电子 邮件 [wanglinayahoo, con 


标题 天 风 ] 
哪里 有 ASP 动 态 网 站 开发 在 线 者 程 ?| 二 


EZ E 2 
(a) 留言 提交 前 (b) 留言 提交 后 
图 13-35 转 入 信息 提示 网 页 


|zhangliangfton. | ASP |AsP 技 术 | | 
| zhangxiao8126. c 动态 网 页 ,动态 网 页 与 静 考 E10-8-12 0:47:03 
liminaR126. com | 我 爱 网 站 开发 | 我 爱 网 站 开发 10-8-12 0:47:56 | 
jyanjiezhao8l163.| 你 好 |WELDCbr> |10-8-12 0:49:34| 


zhangliangaton. 上 

Tangrhenglasina | 我 爱 ASP 21 
jwanghal63. com | 教材 1ASP 动 态 网 页 制作 |3-8-12 10:59:26| 
| zhangxiao8126. « HELLD helle ASP | -6-12 11:00:09| 


| 女 
| 男 
| 去 

去 
| 男 

男 
| 女 
| 文 
| 男 
| 男 


ES 
15 


记录 : [OCU [JU 汐 
图 13-36 留言 记录 保存 在 数据 表 中 
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13.4.3 制作 留言 列表 网 页 first. asp 


用 户 添加 留言 以 后 ,需要 有 一 个 网 页 把 留言 的 内 容 进 行列 表 和 显示 。 留 言 网 站 的 列 
表 显 示 一 般 是 网 站 首页 。 留 言 的 标题 会 生成 一 个 链接 ,用 户 单 击 这 个 链接 以 后 会 打开 留 
言 信息 显示 网 页 。 留 言 的 列表 和 分 页 程序 可 以 利用 Dreamweaver 8.0 自动 生成 。 

(1) 在 Dreamweaver 8.0 中 执行 “文件 ”一 “新 建 ”" 命 令 , 新 建 一 个 ASP VBScript 文 
件 。 保 存在 根 目 录 D:\web 下 ,文件 名 为 first. asp。 

(2) 创建 记录 集 。 在 “记录 集 ” 对 话 框 的 “名 称 ” 文 本 框 中 输入 记录 集 名 称 rs, 在 “ 连 
接 ” 下 拉 菜 单 中 选择 数据 库 连 接 data, 在 “表格 ”下拉 菜单 中 选择 表 book, 在 “ 列 ” 栏 中 选择 
“ 选 定 的 " 单 选 按钮 。 在 留言 列表 网 页 中 不 需要 查询 出 这 个 表 的 所 有 内 容 , 只 需要 查询 id、 
username 和 title 3 个 字段 。 按 住 Ctrl 键 单 击 需 要 查询 的 字段 。 在 “排序 ”下 拉 菜 单 中 选 
择 id 选项 ,后 面 的 排序 方式 选择 “降序 ”。 在 留言 列表 网 页 中 ,需要 把 后 添加 的 留言 排列 
在 前 面 ,如 图 13-37 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 记录 集 的 插入 。 


记录 集 


图 13-37 设置 记录 集 


(3) 插入 动态 表格 。 在 “动态 表格 ”对 话 框 的 记录 集 ” 下 拉 菜 单 中 选择 已 经 创建 好 的 
记录 集 rs, 在 “显示 ”文本 框 中 输入 6, 设置 每 页 显示 6 条 记录 ,如 图 13-38 所 示 。 单 击 “ 确 
定 ” 按 钮 完成 设置 。 


图 13-38 设置 动态 表格 
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(4) 在 “设计 ”视图 中 单 击 动态 表格 的 最 后 1 个 单元 格 , 在 “代码 ”视图 中 找到 代码 
二 % 二 (rs. Fields. Item("title"). Value)% 之 。 这 名 代码 用 于 显示 留言 的 标题 。 需 要 在 
这 名 代码 中 添加 一 个 链接 ,链接 到 网 页 show. asp 显示 留言 的 内 容 (show. asp 网 页 将 在 后 
面 介绍 制作 方法 ) 。 下 面 是 更 改 以 后 的 生成 网 页 链接 的 代码 : 


<a href= "show.asp? id-< $= ( rs.Fields.Ttem("id") .Value)s> " target= blank> 
< $= (rs.Fields.Item("title") .Value)®> 
</a> 


(5) 选中 动态 表格 ,在 表格 的 “属性 ?面板 中 设置 表格 的 宽度 为 500 像素 “对 齐 ?* 方 式 
为 “居中 对 齐 ”。 在 表 头 提示 中 ,输入 所 需 的 表 头 文本 ,如 图 13-39 所 示 。 


抱 D:NwebNfirst. asp (XHTEL)# 
,FPP ,PAPE 
lo 


图 13-39 ”修改 后 的 动态 表格 


(6) 插入 记录 集 导 航 条 。 具 体 方法 可 参照 13. 3.4 节 。 插 入 后 效果 如 图 13-40 所 示 。 


Cr 


图 13-40 插入 记录 集 导 航 条 


(7) 保存 网 页 , 按 F12 键 预 览 。 留 言 列表 网 页 的 运行 效果 如 图 13-41 所 示 。 


第 人 3 章 ”使 用 Deomwecver 创 建 动 态 网 站 


下 留言 板 首页 - 了 crosoft Internet Exzplorer 
文件 E) 编辑 (E) 查看 (Y) 收藏 (4) 工具 (T) 帮助 (H) 


@ 量 O53 oO| a 冯 


图 13-41 留言 列表 网 页 


13.4.4 制作 留言 显示 网 页 show. asp 


留言 列表 网 页 中 列 出 了 数据 库 中 的 留言 ,留言 标题 生成 的 指向 留言 查看 网 页 的 链接 。 
单 击 这 个 链接 以 后 ,需要 打开 一 个 留言 查看 网 页 。 留 言 查看 网 页 是 从 数据 库 中 查询 到 这 
一 条 留言 数据 ,并 用 动态 文本 的 方式 显示 出 来 。 

(1) 在 Dreamweaver 8.0 中 执行 “文件 ”一 "新建" 命令 ,新 建 一 个 ASP VBScript 文 
件 。 保 存在 根 目录 D:;\web 下 ,文件 名 为 show. asp。 

(2) 在 Dreamweaver 8.0 的 “标题 "文本 框 中 输入 网 页 标题 “留言 显示 网 页 ”。 

(3) 创建 记录 集 。 在 “记录 集 ” 对 话 框 的 “名 称 ” 文 本 框 中 输入 记录 集 名 称 rsl ,在 “ 连 
接 ” 下 拉 菜 单 中 选择 数据 库 连 接 data, 在 “表格 "下 拉 菜 单 中 选择 表 book, 在 “ 列 ” 栏 中 选择 
“全 部 ” 单 选 按钮 。 在 “筛选 "下 拉 菜 单 中 选择 id, 将 数据 表 中 的 id 字段 作为 数据 查询 条 
件 , 数 值 关系 中 选择 “二 ”选项 ,在 条 件 下 拉 菜 单 中 选择 “URL 参数 ”,URL 参数 的 字段 填 
写 id, 如 图 13-42 所 示 。 单 击 “ 确 定 ” 按 钮 ,完成 记录 集 的 插入 。 


图 13-42 设置 记录 集 
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(4) 执行 “插入 ”表格 ”命令 ,插入 一 个 7 行 2 列 、 宽 为 500 像素 的 表格 。 在 表格 的 
左边 单元 格 中 输入 提示 文本 ,如 图 13-43 所 示 。 


5D:\web\show. asp (XHTEL)# 


图 13-43 插入 表格 


(5) 选中 “留言 标题 ”单元 格 右边 的 单元 格 ,执行 “插入 ”应 用 程序 对 象 ”动态 数 
据 ” 一 "动态 文本 ”命令 ,在 单元 格 中 插入 一 个 动态 文本 。 在 记录 集 rsl 中 选择 需要 显示 的 
字段 title。 用 相同 方法 为 其 他 单元 格 插入 动态 文本 。 插 入 动态 文本 的 表格 如 图 13-44 
所 示 。 


WD:\web\show. asp (XHTEL)# 
了 py pp CP 


mm PP EPROP FPP ES 


{rsl. title} 


{rsl. usernane} 


{rsl. sex} 


{rsl. enail} 


{rsl.hits} 


{rsl. tine} 


{rsl. content} 


图 13-44 插入 动态 文本 
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ke 


(6) 在 数据 表 book 中 有 一 个 hits 字段 用 来 记录 数据 库 的 查看 次 数 ,用 户 每 次 查 
看 这 条 留言 时 会 把 这 个 留言 的 计数 加 1。 在 ASP 中 需要 使 用 编辑 的 方法 实现 数据 库 
的 更 新 。 执 行 “ 插 入 ”一 “应 用 程序 对 象 >> “命令 "命令 ,弹出 如 图 13-45 所 示 的 “ 命 
令 ? 对 话 框 。 在 该 对 话 框 中 的 “名 称 ? 文 本 框 中 输入 命令 名 称 "C1”, 在 “连接 ?下 拉 菜 
单 中 选择 数据 连接 data, 在 “类 型 "下 拉 菜 单 中 选择 “更 新 ”选项 。 单 击 “ 确 定 ” 按 钮 完 
成 命令 的 插入 。 


连接 :| data 
口 返回 具有 以 下 名 称 的 记录 集 : 


图 
汀 ”预存 过 程 


图 13-45 “命令 ”对 话 框 


(7) 在 “代码 ”视图 中 找到 SQL 语句 Cl. CommandText = 二" UPDATE SET 
WHERE" ,这 个 语句 没有 正确 生成 数据 的 更 新 。 需 要 修改 为 下 面 的 语句 : 


C1.CamandText= "UPDATE book SET hits=hits+ 1 WHERE id= "& request ("id") 


(8) 保存 网 页 。 在 浏览 器 中 打开 网 页 first. asp, 在 留言 列表 中 单 击 一 个 留言 标题 的 
链接 ,打开 留言 显示 网 页 显示 一 条 留言 ,如 图 13-46 所 示 。 刷 新 网 页 时 ,留言 查看 次 数 的 
计数 会 相应 变化 。 


13.4.5 制作 网 页 效果 


前 面 已 经 完成 了 网 页 留言 的 添加 和 查看 功能 ,但 是 页 面 效果 单调 ,而 网 页 不 光 要 实现 
功能 ,还 需要 美观 的 界面 ,才能 受到 用 户 的 接受 和 喜爱 。 本 节 将 为 前 面 创建 的 网 页 文件 添 
加 背景 效果 ,效果 如 图 13-47 所 示 。 

(1) 打开 write. asp 文件 ,执行 “插入 ”一 “表格 ”命令 ,插入 一 个 1 行 1 列 、 宽 为 100% 
的 无 边框 表格 。 

(2) 选中 该 表格 ,在 “属性 ”面板 中 的 “背景 图 片 ” 文 本 框 中 选择 背景 图 片 ,这 里 选择 
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010-8-12 12:07:32 


取 里 有 ASP 动 态 网 站 开发 在 线 教程 ? 


(a) 单 击 留言 标题 “求助 ” (b) 查看 “求助 "留言 
图 13-46 查看 留言 
文 作 @) FE ET me Ea) 帮助 (0) 


四 并 四- 国 国 鸭 户 姑 次 kg 夫 加 全 -名 加 .总 


其 E 罗 | 销 http://1ecalhost/vrite,asp， 


图 13-47 添加 背景 效果 
D:\web\images\bj. jpg。 


(3) 在 “设计 ”视图 中 , 按 住 鼠标 左 键 不 放 , 在 动态 网 页 的 原 有 内 容 上 拖 动 ,选中 原 有 
的 动态 网 页 内 容 ,执行 “ 编 辑 ”>“ 剪 切 ” 命 令 , 剪 切 这 些 内 容 。 将 鼠标 放置 在 单元 格 内 , 执 
行 “编辑 ”>“ 粘 贴 ”命令 ,将 动态 网 页 内 容 移 动 到 单元 格 中 ,如 图 13-48 所 示 。 


(4) 选中 表单 表格 ,在 “属性 ”面板 中 设置 表格 的 “边框 ”为 1,“ 间 距 ” 为 2,“ 填 充 ” 为 2， 
“边框 颜色 ”为 #999999,“ 背 景 颜色 ”为 #FFCCFF 
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[seav>y cbtey ctry Gap Cformtforal> [07 DN J 


图 13-48 ”将 动态 表单 移 到 单元 格 中 


(5) 将 鼠标 定位 在 表单 上 端 ,输入 文字 “留言 板 ”, 设 置 大 小 为 72, 字 体 为 华文 彩云 , 颜 
色 为 #FFOOFF ,居中 对 齐 , 如 图 13-49 所 示 。 


同上 回忆 


Pel 


> 


pe 人 fe eo egg : 
>% 21N[30 
入 议和 鸭 -& 
i 


图 13-49 添加 “留言 板 ” 标 题 


(6) 保存 网 页 , 按 F12 键 预览 。 网 页 效果 如 图 13-47 所 示 。 
(7) 用 相同 的 方法 ,为 first. asp、show. asp、msg. asp 文件 设置 网 页 效果 ,如 图 13-50、 
图 13-51 和 图 13-52 所 示 。 
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文件 @) 编辑 外) Re OD) EE 
@ 提 -上 日: 因 国 给 | 有 于 穴 业 天 用 人 B" 盖 国 - 沈 


得 ia 用 户 各 | 甸 言 标 二 | 区 
也 杨 政 [RSP 
0 张 亮 志 四 A 
5 区 号 区 二 
日 于 小 图 
区 区 
5 李 明 


加 
[文中 国 | 


路 号 (4) 工具 (T) 帮助 (6) 
@ 鲁 .上 日- 国 国 的 | 户 a 灾 WRs 忆 思 -至 国 - 沁 


13-51 show. asp 页 面 效果 
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当 信 息 担 示 网 页 一 Wicrosoft Tntcrnct Fzplorcr 
文件 到) 编辑 代 ) 查看 地) 收效 过 ) 工具 代 ) 帮助 下] 


@ 磺 - 旧 - 国 国 约 | 记 雪 次 所 类 同 | 全 " 旦 国 -各 


半生 加 | 个 http://1ocalhost/nss. aspninfo- 留 言 浙 加 谍 功 。 


留言 添加 成 功 。 


图 13-52 msg. asp 页 面 效 果 


13.5 习 题 


操作 题 


利用 本 章 所 学 知识 ,制作 一 个 简单 的 聊天 室 页 面 。 
提示 : 本 网 页 可 以 利用 上 下 框架 结构 进行 布局 。 下 框架 页 面 用 来 输入 聊天 信息 , 提 
交 后 在 上 框架 页 面 中 显示 出 来 。 
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